Checkbox

Native CSS checkbox component derived from the List trailing checkbox source, node 930:4101.

Default

Receive notifications Native checkbox with label and helper text. Accept terms Checked state submits the native input value.

States

Hover Static hover example. Focus visible Keyboard focus uses an outline. Indeterminate Use the native indeterminate property at runtime. Disabled Disabled input keeps native semantics. Disabled checked State remains visible without interaction. Invalid This option needs review.

List Integration

List item with checkbox The trailing control is a native input.

CSS API

Use .sui-checkbox as the label/root, .sui-checkbox__control for the native input, and .sui-checkbox__box for the visual box.

<label class="sui-checkbox">
  <input class="sui-checkbox__control" type="checkbox">
  <span class="sui-checkbox__box" aria-hidden="true"></span>
  <span class="sui-checkbox__body">
    <span class="sui-checkbox__label">Label</span>
    <span class="sui-checkbox__helper">Helper text</span>
  </span>
</label>