RadioGroup

import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Radio, RadioGroup } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <RadioGroup name="usage">
        <Radio value="one">Option One</Radio>
        <Radio value="two">Option Two</Radio>
        <Radio value="three">Option Three</Radio>
      </RadioGroup>
    </Field>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="label-usage">
      <Radio value="one" />
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup disabled name="disabled-group-usage" value="one">
      <Radio value="one">Option One</Radio>
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="disabled-usage">
      <Radio defaultChecked value="one">
        Option One
      </Radio>
      <Radio disabled value="two">
        Option Two
      </Radio>
      <Radio value="three">Option Three</Radio>
    </RadioGroup>
  );
}

import { Button, Flex, Radio, RadioGroup } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex>
      <RadioGroup
        name="controlled-usage"
        onValueChange={setValue}
        value={value}
      >
        <Radio value="one">Option One</Radio>
        <Radio value="two">Option Two</Radio>
        <Radio value="three">Option Three</Radio>
      </RadioGroup>
 
      <Button disabled={!value} onClick={() => setValue("")}>
        Reset
      </Button>
    </Flex>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="description-usage">
      <Radio description="Helper Text" value="one">
        Option One
      </Radio>
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}