Radio
On this page
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
color
(optional)
Default value:
'primary'
label
string
(optional)
theme
object
(optional)
Default value:
theme
Styled System Props
Radio uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.
Design guidelines
Some best practices for using Radio in your product.
Always use with a label or heading
Do
Use a label to provide users with instructions on what to select.
Don't
Don't just provide a user with unlabelled choices.
Only use for binary decisions
Do
Radios are for times when your users can choose only one option.
Don't
Checkboxes are not suitable for decisions where you can select multiple options.
Only use for small groups of options
Do
Use a Select component when there are lots of options to choose from.
Don't
Don't present lots of choices to a user like this as it will clutter your interface.
