Radio button
Radio buttons are used when there is a list of two or more options that are mutually exclusive. When a user chooses a new item, the previous choice is automatically deselected.
Color
| Element | Property | Color token |
|---|---|---|
| Group label | color | $text-secondary |
| Radio button label | color | $text-primary |
| Radio button (unselected) | border | $border-subtle-01 |
| background-color | $background | |
| Radio button (selected) | border | $border-brand |
| dot | $icon-brand | |
| Helper text | text color | $text-secondary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|---|---|---|
| Group label | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Radio button label | 14 / 0.875 | Regular / 400 | $body-compact-02 |
| Helper text | 14 / 0.875 | Regular / 400 | $helper-text-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|---|---|---|
| Radio button icon | height, width | 15px | – |
| margin-right | 8 / 0.5 | $spacing-03 | |
| Dot | height-width | 7px | – |
| Group label | margin-bottom | 4 / 0.25 | $spacing-02 |
| Group item | margin-bottom | 8 / 0.5 | $spacing-03 |