Radio

Use the Radio component when users can select only one option from a short list and you want all the options to be visible. Radio maps to a radio input and a label.
Import component
import { Radio } from 'rimble-ui';

Example

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptional
theme
labelstringoptionalnone
coloroptional
'primary'
Styled System Props
Radio uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Design guidelines

Some best practices for using Radio in your product.
Always use with a label or heading
Your users will need instruction on what to choose. Don't just provide them with their choices.
Do
Don't
Only use for binary decisions
Radio buttons are for times when you users can choose only one option.
Do
Don't
Only use for small groups of options
If the user can choose from lots of options, like currencies or states, use a Select component instead.
Do
Don't
  • Select - When users can only choose one option from a long list
  • Checkbox – When users can choose 0 or multiple options from a list
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute