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

Checkbox default
<Checkbox label="Checkbox default" required={true} />
<Checkbox label="Checkbox default" required={true} />
Copy code

Checked

Checkbox checked
<Checkbox defaultChecked label="Checkbox checked" required={true} />
<Checkbox defaultChecked label="Checkbox checked" required={true} />
Copy code

Disabled

Checkbox disabled
<Checkbox disabled label="Checkbox disabled" required={true} />
<Checkbox disabled label="Checkbox disabled" required={true} />
Copy code

Checked and disabled

Checkbox checked disabled
<Checkbox
  checked
  disabled
  label="Checkbox checked disabled"
  my={2}
  required={true}
/>
<Checkbox
  checked
  disabled
  label="Checkbox checked disabled"
  my={2}
  required={true}
/>
Copy code

Props

'primary'

Styled System Props

Checkbox uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.

Design guidelines

Some best practices for using Checkbox in your product.

Always use with a label

Only use when users can make multiple selections

Related components

• 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