Checkbox

Use the Checkbox component when users can choose 0 or more than 1 options from a list. Checkbox maps to a checkbox input and a label.
Import component
import { Checkbox } from 'rimble-ui';

Examples

Different ways to use the Checkbox component
Default checkbox
Checked
Disabled
Checked and disabled

Props

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

Design guidelines

Some best practices for using Checkbox in your product.
Always use with a label
Your users will need instruction on what to select. Don't just provide them with their choices.
Do
Don't
Only use when users can make multiple selections
Checkboxes are for times when your users can choose multiple options or no options. This means they're not suitable for binary decisions like Yes/No.
Do
Don't
  • Select - when users can only choose one option from a long list
  • Radio buttons – When users can only choose one option or the choices are binary like yes/no
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

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