The React documentation for this component can be read from Storybook (link here)

Checkbox

Use to allow users to choose between two different states by turning an option on or off.

Description

A checkbox is not mutually exclusive. Multiple checkboxes can be used when the choices are obvious.

Context

The checkbox is a base component and can be used within larger components and layouts.

Behaviour

The control button inherits its colours from the secondary button. It has 5 states. Make it clear with words when users can select one or multiple options. The label should be included in the hit radius of the buttons

Modifiers

  • form-checkbox--loud - add this class if you want the checkbox and label to be more visible. This modifier also requires the label to be wrapped inside a span with class form-checkbox__label (see example)

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-form-checkbox;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Regular checkbox

Loud checkbox

// Regular checkbox
<label class="form-checkbox">
  <input class="form-checkbox__input" type="checkbox">
  <span class="form-checkbox__icon"></span>
  Click me!
</label>


// Loud checkbox
<label class="form-checkbox form-checkbox--loud">
  <input class="form-checkbox__input" type="checkbox">
  <span class="form-checkbox__icon"></span>
  <span class="form-checkbox__label">Click me</span>
</label>