Base

Class	Description
.ui-checkbox	Base class

Size

Class	Value
.ui-checkbox--lg	lg

State

Class	Value
.ui-checkbox--error	error
.ui-checkbox--success	success

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-checkbox-size	calc(var(--ui-unit) * 2)	Overall size
--ui-checkbox-radius	var(--ui-radius-sm)	Corner radius
--ui-checkbox-bg	var(--ui-color-bg)	Background color
--ui-checkbox-bg-checked	var(--ui-color-primary)	Bg checked
--ui-checkbox-border-color	var(--ui-color-border-strong)	Border color
--ui-checkbox-border-color-focus	var(--ui-color-primary)	Border color focus
--ui-checkbox-check-color	var(--ui-color-text-inverse)	Check mark text color
--ui-checkbox-size-lg	calc(var(--ui-unit) * 3)	Overall size at large size
--ui-checkbox-error-border	var(--ui-color-danger)	Error border
--ui-checkbox-success-border	var(--ui-color-success)	Success border

<input class="ui-checkbox" type="checkbox" checked></input>
<input class="ui-checkbox ui-checkbox--lg" type="checkbox" checked></input>

<input class="ui-checkbox" type="checkbox"></input>
<input class="ui-checkbox" type="checkbox" checked></input>
<input class="ui-checkbox" type="checkbox" disabled></input>
<input class="ui-checkbox" type="checkbox" checked disabled></input>

<input class="ui-checkbox ui-checkbox--error" type="checkbox"></input>
<input class="ui-checkbox ui-checkbox--error" type="checkbox" checked></input>
<input class="ui-checkbox ui-checkbox--success" type="checkbox"></input>
<input class="ui-checkbox ui-checkbox--success" type="checkbox" checked></input>

<label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
  <input class="ui-checkbox" type="checkbox"></input>
  <span>Accept terms and conditions</span>
</label>

<fieldset class="ui-checkbox-group">
  <legend class="ui-checkbox-group__legend">Notifications</legend>
  <div class="ui-checkbox-group__items">
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Email</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox"></input>
      <span>SMS</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox"></input>
      <span>Push</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-checkbox-group ui-checkbox-group--horizontal">
  <legend class="ui-checkbox-group__legend">Interests</legend>
  <div class="ui-checkbox-group__items">
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Design</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox"></input>
      <span>Engineering</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Product</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox"></input>
      <span>Marketing</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-checkbox-group ui-checkbox-group--compact">
  <legend class="ui-checkbox-group__legend">Features</legend>
  <div class="ui-checkbox-group__items">
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Dark mode</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Notifications</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox"></input>
      <span>Analytics</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-checkbox-group ui-checkbox-group--error">
  <legend class="ui-checkbox-group__legend">Terms</legend>
  <div class="ui-checkbox-group__items">
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox ui-checkbox--error" type="checkbox"></input>
      <span>I accept the terms of service</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox ui-checkbox--error" type="checkbox"></input>
      <span>I accept the privacy policy</span>
    </label>
  </div>
  <span class="ui-form-error">You must accept all terms to continue</span>
</fieldset>

<fieldset class="ui-checkbox-group" disabled>
  <legend class="ui-checkbox-group__legend">Permissions (locked)</legend>
  <div class="ui-checkbox-group__items">
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Read</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox" checked></input>
      <span>Write</span>
    </label>
    <label class="ui-checkbox-group__item">
      <input class="ui-checkbox" type="checkbox"></input>
      <span>Admin</span>
    </label>
  </div>
</fieldset>