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

React component <Input/> is available.
It inherits the error property from a Fieldset component and automatically applies the error style.

※ The disabled state is automatically inherited through the native HTML feature.

Q&A

How to customize the bold line that appears when focused?

You can set outline property in CSS.
Though it is recommended to leave it as default for accessibility.