components
RadioButton
v.1.0.0 | Saturn
StorybookAllow the user to select one item from a group.
Component
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | Indicates the selected state. |
2 | Describes the reason for the selection. |
3 Required | Describes the action that will occur if a user taps a radiobutton. |
4 | Gives more information about the action described on the label. |
Variants
- Default unselected: A default state communicates an interactive component or element.
- Default selected: Displays the on state checkbox.
- Disabled unselected: A disabled state communicates a noninteractive component or element.
- Disabled selected: A disabled state communicates a noninteractive component or element.
- Keyboard focus: A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
Unselected
Selected
Layout
Padding between elementsThe indicated distances between the elements must be respected.
Related text with inline linkIf we have a text with a link it can be placed after the component as a related element.
Several linesWhen the label has several lines, the text will be aligned at the top with the radio button.
Options
Minimum itemsSince it is an exclusionary selection item, it must always contain a minimum of 2 items.
No maximum itemsIt may contain as many items as necessary.
Special caseFor special cases, we can use each radio with a bold title but it must be justify.
Do's and dont's
Do’s
The user will only be able to select a single option.
Don’t
For sets with multiple selection we will use the Checkbox component.