Anatomy
Image is not to scale for informative purposes only
- Radio container
- Border
- Filled container
Options
Variants
There are three variants primary secondary and cta
Options
isOutline
Default value
Radio buttons can be preselected or not depending on the situation.
Orientation
Radio groups can be either horizontal or vertical. By default, radio groups are vertical.
Behaviors
Disabled
Focus
Error
Text Overflow
Guidance
When error should be shown
Error should only occur if the options were not pre-selected and user tries to continue without selecting an option. Required radio groups should be indicated in the label with a * in the error token color. Suplementary error message should be shown below the group.
Required
When radio button selection is required it should be reflected in the fieldset label.
Avoid using radio buttons for a binary choice
The toggle or checkbox is most often used for settings and allows the user to choose between yes/no options or on/off.
API Reference
RadioGroup
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| defaultValue | enum string & (string | number | readonly string[]) | ---- | False | |
| dir | enum ltr | rtl | ---- | False | |
| loop | enum boolean | ---- | False | |
| name | Shared name of group radios | string | ---- | True |
| onValueChange | (value: string) => void | ---- | False | |
| orientation | enum horizontal | vertical | ---- | False | |
| required | enum boolean | ---- | False | |
| value | string | ---- | False | |
| legend | Legend text labelling entire group | enum ReactNode | ---- | True |
| disabled | Inputs are disabled, changing appearance and preventing input | enum boolean | ---- | False |
| error | If there is an error with the fields | enum boolean | ---- | False |
| errorMessage | Description of error | enum ReactNode | ---- | False |
| isOutline | Only the radio button's outline is displayed | enum boolean | false | False |
| variant | Color variants | enum primary | secondary | cta | primary | False |
RadioButton
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| required | enum boolean | ---- | False | |
| value | underlying value for input | string | ---- | True |
| label | label text displayed next to button | string | ---- | True |
| id | id of input | string | ---- | True |
| asChild | enum boolean | ---- | False | |
| error | displays error state with colored border | enum boolean | ---- | False |
| isOutline | enum boolean | true | ---- | False | |
| checked | enum boolean | ---- | False | |
| variant | enum primary | secondary | cta | primary | False | |
| isInvalid | enum boolean | true | ---- | False |