Last modified: November 18, 2025
The RadioButton component renders a radio select button. If you want to include more than two radio buttons, or are building a form, it’s recommended to use the ToggleGroup component instead.

Props
| Prop | Type | Description |
|---|---|---|
name | String | The input’s unique identifier. |
value | String | number | The radio button value. This value is not displayed, but is passed on the server side when submitted, along with name. |
checked | Boolean | Whether the radio button is currently selected. Default is false. |
initialIsChecked | Boolean | When set to true, the option will be selected by default. Default is false. |
description | String | Text that describes the field’s purpose. |
readonly | Boolean | When set to true, users will not be able to enter a value into the field. Set to false by default. |
variant | 'sm', 'small' | 'default' (default) | The size of the checkbox. |
inline | Boolean | When set to true, arranges radio buttons side by side. Default is false. |
onChange | (checked: boolean, value: string) => void | A callback function that is invoked when the radio button is selected. Passes the new value. |