Radio
Radios let users choose a single option in a series of options.
Simple
Simple Radio example.
Group
Controlled radio group example
Disabled
Radio & Radio.Group allow to disabled to prevent user execute click event.Vertical
Radio list can display in vertical.
Color
Radio & group able to apply custom css via
radioClass prop.API
Radio
| Prop | Description | Type | Default |
|---|---|---|---|
| checked | Whether the Radio is checked | boolean | - |
| radioClass | Custom css for Radio | string | - |
| defaultChecked | Whether the Radio initial state is checked | boolean | - |
| disabled | Whether the Radio is disabled | boolean | - |
| labelRef | Ref of Radio label element | string | - |
| name | The name of the Radio input field | string | - |
| onChange | Callback when Radio value is changed | (value: any, e: MouseEvent) => void | - |
| value | Value of Radio | any | - |
| vertical | Display Radio in vertical | boolean | - |
Radio.Group
| Prop | Description | Type | Default |
|---|---|---|---|
| color | Custom color for all radio in the group, available colors option based on tailwind theme.colors | string | current theme color |
| disabled | Whether to disable all radios | boolean | - |
| name | Name of radios under radio group | string | - |
| onChange | Callback when value is changed | (values: any, e: MouseEvent) => void | - |
| value | Specify selected value of radios | any | - |
| vertical | Display list of radios in vertical | boolean | false |