Checkbox

Single checkbox component.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

Checkbox

React

<Checkbox id="checkbox" value="checkbox" label="Checkbox" />

CSS

<div class="checkbox">
  <input type="checkbox" id="checkbox" value="checkbox" class="checkbox_control" />
  <label for="checkbox" class="checkbox_label">Checkbox</label>
</div>

Props

Checked

Checked

React

<Checkbox id="checked" value="Checked" label="Checked" checked />

CSS

<div class="checkbox">
  <input type="checkbox" id="checked" value="Checked" class="checkbox_control" checked />
  <label for="checked" class="checkbox_label">Checkbox</label>
</div>

Disabled

Disabled

React

<Checkbox id="disabled" value="Disabled" label="Disabled" disabled />

CSS

<div class="checkbox">
  <input type="checkbox" id="disabled" value="Disabled" class="checkbox_control" disabled />
  <label for="disabled" class="checkbox_label">Checkbox</label>
</div>

Dense

Reduce the font size and checkbox size for a more compact appearance.

Dense

React

<Checkbox id="dense" value="dense" label="Dense" dense />

CSS

<div class="checkbox checkbox-dense">
  <input type="checkbox" id="dense" value="dense" class="checkbox_control" />
  <label for="dense" class="checkbox_label">Dense</label>
</div>