Checkbox

Checkboxes let users opt in or select multiple items. In Nuxt / PLAI use UCheckbox.

Element	Source
Unchecked border and surface	Nuxt UI zinc neutrals
Checked fill and border	CI --ci-color-brand-blue
Focus ring	CI link blue

Live examples

I agree to the terms of use Unchecked Nuxt UI

Email me when processing completes Checked CI

Unavailable option

HTML

<label class="ci-checkbox">
  <input type="checkbox" name="terms" />
  <span>I agree to the terms of use</span>
</label>

Accessibility

• Native <input type="checkbox"> keeps full keyboard and screen-reader support.
• Clickable area includes the label text — do not rely on the box alone.
• :focus-visible outline on the checkbox itself.
• Checked state uses colour and a check mark icon — not colour alone.

Related patterns

• Radio — mutually exclusive choices
• Switch — immediate on/off settings