Radio
ARIA
RTL
Radio buttons are used to represent a group of choices whereby users can only select one option.
The main difference between the radio button and the checkbox is, users are allowed to select single options whereas in the checkbox you can have multiple options.
Based on Headless UI.
Anatomy
<Radio>
<Radio.Option>
<Radio.Indicator />
...
</Radio.Option>
</Radio>Default
Disabled
Option 1
Option 2
As form item
Option 1
Option 2
Uncontrolled
Option 1
Option 2
Customization
Option 1
Option 2
Option 1
Option 2
Option 1
Option 2
Radio props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | - | Children of Radio |
| className | string | No | - | Tailwind classes for customization |
| defaultValue | string | number | No | - | Default value of uncontrolled Radio |
| disabled | boolean | No | - | Disabled state of Radio |
| name | string | number | No | - | Name of Radio when using inside a form |
| setValue | any | No | - | Set value of Radio |
| value | string | number | No | - | Value of Radio |
Radio.Option props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | - | Children of Radio.Option |
| className | string | No | - | Tailwind classes for customization |
| disabled | boolean | No | - | Disabled state of Radio |
| value | string | number | No | - | Value of Radio |
Radio.Indicator props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |