Radio

Radio is a radio button component with size variants, custom styling, and optional inline labels. Use the name prop to group radios together.

Open in Storybook

Import

import { Radio } from "@tosui/react";

Basic Usage

Preview

Code

<VStack gap={2} align="flex-start">
  <Radio name="fruit" label="Apple" value="apple" />
  <Radio name="fruit" label="Banana" value="banana" />
  <Radio name="fruit" label="Orange" value="orange" />
</VStack>

Without Label

Preview

Code

<Radio name="standalone" aria-label="Option" />

Sizes

Preview

Small radioMedium radio (default)Large radio

Code

<VStack gap={4} align="flex-start">
  <Radio size="sm" name="size" label="Small radio" value="sm" />
  <Radio size="md" name="size" label="Medium radio (default)" value="md" />
  <Radio size="lg" name="size" label="Large radio" value="lg" />
</VStack>

States

Preview

UncheckedCheckedDisabledDisabled checked

Code

<VStack gap={4} align="flex-start">
  <Radio name="state1" label="Unchecked" />
  <Radio name="state2" label="Checked" defaultChecked />
  <Radio name="state3" label="Disabled" disabled />
  <Radio name="state4" label="Disabled checked" disabled defaultChecked />
</VStack>

Controlled

Use isChecked and onChange for controlled mode.

function ControlledRadioGroup() {
  const [selected, setSelected] = useState("option1");

  return (
    <VStack gap={2} align="flex-start">
      <Radio
        name="controlled"
        label="Option 1"
        value="option1"
        isChecked={selected === "option1"}
        onChange={() => setSelected("option1")}
      />
      <Radio
        name="controlled"
        label="Option 2"
        value="option2"
        isChecked={selected === "option2"}
        onChange={() => setSelected("option2")}
      />
      <Radio
        name="controlled"
        label="Option 3"
        value="option3"
        isChecked={selected === "option3"}
        onChange={() => setSelected("option3")}
      />
    </VStack>
  );
}

Radio Group with Label

Preview

Select your plan:

Free - $0/monthPro - $10/monthEnterprise - Contact us

Code

<VStack gap={2} align="flex-start">
  <Box fontWeight="medium">Select your plan:</Box>
  <Radio name="plan" label="Free - $0/month" value="free" defaultChecked />
  <Radio name="plan" label="Pro - $10/month" value="pro" />
  <Radio name="plan" label="Enterprise - Contact us" value="enterprise" />
</VStack>

Props Reference

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Radio size
label	string	-	Optional label text
name	string	-	Group name (required to link radios)
value	string	-	Radio value
disabled	boolean	false	Disable the radio
isChecked	boolean	-	Controlled checked state
defaultChecked	boolean	-	Initial checked state (uncontrolled)
onChange	(e: ChangeEvent) => void	-	Change handler

Radio also accepts all native <input type="radio"> attributes.

Accessibility

• Uses native <input type="radio"> for accessibility
• Label is associated with the input
• Use the same name prop to group radios
• Supports keyboard navigation (arrow keys to switch between options)
• When no label is provided, use aria-label for accessibility

TypeScript

import { Radio, type RadioSize, type RadioProps } from "@tosui/react";