Radio Button

Basic

You can use the <Radio> component to create radio button options within a group using <Radio.Group>. The color mode is automatically determined based on the theme (light or dark).

Credit Card

PayPal

<Radio.Group name="radio-group">
  <Radio value="credit">Credit Card</Radio>
  <Radio value="paypal">PayPal</Radio>
</Radio.Group>

Disabled

Use the isDisabled prop to disable the radio buttons within a radio button group.

Free Trial (Expired)

Premium Plan

<Radio.Group isDisabled={true} name="radio-group">
  <Radio value="free">Free Trial (Expired)</Radio>
  <Radio value="premium">Premium Plan</Radio>
</Radio.Group>

Value and DefaultValue

Use value to control the selected radio button within a radio button group. Use defaultValue to set the default selected radio button within a radio button group.

<Radio.Group value="express" defaultValue="standard" name="radio-group">
  <Radio value="standard">Standard (5-7 days)</Radio>
  <Radio value="express">Express (2-3 days)</Radio>
  <Radio value="overnight">Overnight</Radio>
</Radio.Group>

<Radio.Group defaultValue="large" name="radio-group-2">
  <Radio value="small">Small (12 oz)</Radio>
  <Radio value="medium">Medium (16 oz)</Radio>
  <Radio value="large">Large (20 oz)</Radio>
</Radio.Group>

Size

Use the size prop to control the size of the radio buttons within a radio button group. The size prop accepts sm, md, or lg.

{/* Size = "sm" */}
<Radio.Group size="sm" name="radio-group">
  <Radio value="s">Small</Radio>
  <Radio value="m">Medium</Radio>
  <Radio value="l">Large</Radio>
</Radio.Group>

{/* Size = "md" */}
<Radio.Group size="md" name="radio-group-2">
  <Radio value="vegan">Vegan</Radio>
  <Radio value="vegetarian">Vegetarian</Radio>
  <Radio value="omnivore">No restrictions</Radio>
</Radio.Group>

{/* Size = "lg" */}
<Radio.Group size="lg" name="radio-group-3">
  <Radio value="all">All notifications</Radio>
  <Radio value="important">Important only</Radio>
  <Radio value="none">None</Radio>
</Radio.Group>

Spacing

Use the space prop to control the spacing between radio buttons within a radio button group. The space prop accepts a spacing token.

{/* Space = 2 */}
<Radio.Group gap="$2" name="radio-group">
  <Radio value="en">English</Radio>
  <Radio value="es">Español</Radio>
  <Radio value="fr">Français</Radio>
</Radio.Group>

{/* Space = 6 */}
<Radio.Group gap="$6" name="radio-group">
  <Radio value="light">Light mode</Radio>
  <Radio value="dark">Dark mode</Radio>
  <Radio value="system">System default</Radio>
</Radio.Group>

Override Color Mode

Use the colorMode prop to override the color mode of the radio buttons within a radio button group.

Male

Female

<Radio.Group name="radio-group" colorMode="dark">
  <Radio value="male">Male</Radio>
  <Radio value="female">Female</Radio>
</Radio.Group>

Override Accent Color

Use the accentColor prop to override the accent color of the radio buttons within a radio button group.

Urgent

Normal

<Radio.Group name="radio-group" accentColor="rose">
  <Radio value="urgent">Urgent</Radio>
  <Radio value="normal">Normal</Radio>
</Radio.Group>

Override Color Mode and Accent Color

Use the colorMode and accentColor props to override the color mode and accent color of the radio buttons within a radio button group.

Public profile

Private profile

<Radio.Group name="radio-group" colorMode="dark" accentColor="rose">
  <Radio value="public">Public profile</Radio>
  <Radio value="private">Private profile</Radio>
</Radio.Group>

Override Accent Color for Single Radio

Use the accentColor prop to override the accent color of a single radio button within a radio button group.

Featured listing ✨

Standard listing

<Radio.Group name="radio-group">
  <Radio value="featured" accentColor="rose">
    Featured listing ✨
  </Radio>
  <Radio value="standard">Standard listing</Radio>
</Radio.Group>

Basic​

Disabled​

Value and DefaultValue​

Size​

Spacing​

Override Color Mode​

Override Accent Color​

Override Color Mode and Accent Color​

Override Accent Color for Single Radio​