Checkbox

.checkbox is for input[type="checkbox"].

Applicable Elements

Basic Usage

<label class="label"><input class="checkbox" type="checkbox" checked/>Do you want garlic added?</label>

<div>
  <input class="checkbox" type="checkbox" id="wasabi" />
  <label class="label" for="wasabi">Can I add wasabi?</label>
</div>

<div>
  <label class="label" for="friday">Is it Friday today?</label>
  <input class="checkbox" type="checkbox" id="friday" />
</div>

States

<label class="label error">
  <input class="checkbox error" type="checkbox" />
  This is an error
</label>

<label class="label">
  <input class="checkbox" type="checkbox" disabled />
  This is disabled
</label>

<label class="label">
  <input class="checkbox" type="checkbox" checked disabled />
  Checked disabled
</label>

React component Advanced

<Checkbox/> renders a single <input class="checkbox" type="checkbox" /> element.

It inherits the error property from a Fieldset component and automatically applies the error style.

Q&A

How do I customize the outline shown on focus?

You can set the outline property in CSS.
However, we recommend keeping the default outline for accessibility.