Design
Web component
Is documented
The component is fully documented
Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Principles
Use when
- a definite answer is required in an input with multiple options on form pages.
Don't use when
- It need to be used when there is no default selected state.
- you only need to allow users to select a multiple option from a list. In this case, consider using a checkbox group.
- if you need enable/disable setting or functionality, consider using the toggle switch.
- Do not use a radio button when it is selected to change the content and context that follows it. Instead, use a content switcher.
Structure
- Radio Button Group label
- Radio
- Radio button label
- Helper text (optional)
Properties
Placement
Horizontal
Horizontal placement is used in form or modal pages when users can select only one option or may trigger another input when necessary. It should be used together with a maximum of 3 radio buttons at the same time.
Vertical
Vertical placement is used when three or more radio buttons need to be grouped together on setup, onboarding, or form pages.
States
There is no specific state definition for a radio button group. Instead, the radio buttons that belong to the group have state values.
|
Enabled |
The default state is when value is mostly checked, also the radio is unchecked. |
|
Focus |
On focused state (while on the tab key), pressing enter will switch between states (selected/unselected). While on focus state (or tab key) the the radio background takes a blue standard ring. |
|
Disabled |
When a radio button is disabled, the chosen option cannot be selected or deselected. |
Attributes
|
Input label (boolean) |
A radio button group should be used with a label when it is intended to be used as a form input element on forms or modals. |
|
Helper text (boolean) |
Helper text can be used when a message needs to be conveyed to the entire radio button group or just each radio button. Try to convey the message in the helper text on each radio button in one sentence, while keeping it concise. |
Behavior
The first radio button in a radio button group always comes selected by default.
A radio button group listed on the form page must be listed logically. For example, the input that requires the user to choose should be listed first, or the option that is less likely to be used should be listed last.
If you need an unselected state for a radio button that includes only two options, name one of the options as 'Hiçbiri' or use a checkbox according to the context.
If the first listed radio button is disabled and no selection is made, the radio button following it will be selected by default. Alternatively, all radio buttons can be disabled at the same time.
Transition
When the radio is checked (pressed), only the circular area will smoothly transition with a duration of 200ms ease .