Radio

Radio button at two sizes with selected / unselected / disabled states.

Playground

Checked

Size

Disabled

Label

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-radio--playground&viewMode=story&args=checked%3A%21true%3Bsize%3Asm%3Bdisabled%3A%21false%3Blabel%3AHelper+Text

Code

<Radio
  checked
  size="sm"
  disabled={false}
  label="Helper Text"
/>

Props

Name	Type	Default
`checked`	`boolean`	`true`
`size`	`'sm' \| 'lg'`	`'sm'`
`disabled`	`boolean`	`false`
`label`	`string`	`'Helper Text'`

Usage guidelines

When to use

Use for mutually exclusive choices where the user must pick exactly one option.
Show all options at once so the user can compare them before deciding.
Group related radios under a shared label for clear context.

When not to use

Don't use when multiple selections are allowed — use Checkbox instead.
Avoid more than 5–6 options in a radio group; consider a select dropdown above that threshold.
Don't pre-select a radio button for opt-in or consent scenarios.