Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Checkbox

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

Default

States

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>