Componentsbeta

Checkbox

Turn one option on or off, or pick several from a short list. A native checkbox tinted brand red, so it is accessible and looks right on every OS.

Example

Email me new events in my city

Value: false

vue

<Checkbox v-model="newsletter">
  Email me new events in my city
</Checkbox>

Several checkboxes answer one question: wrap them in a fieldset with a legend.

Styles you danceSalsaBachataKizomba

Remember me

vue

<Checkbox id="remember" v-model="remember" />
<Label for="remember">Remember me</Label>

I accept the booking termsAccept the terms to continue.

vue

<Field :error="errors.terms">
  <Checkbox v-model="form.terms">I accept the booking terms</Checkbox>
</Field>

Prop	Type	Default	Description
v-model	boolean	false	Checked state.
default slot	label text	—	When present, the checkbox renders inside its own <label> row (min 44px tall) — the whole row toggles it.
invalid	boolean	false	Red outline + aria-invalid without a Field.
class	string	—	Classes for the row (with slot) or the box (without).
…attrs	HTML attrs	—	name, value, disabled, required, id go to the <input>.

Email me new events

Do — Phrase the label as the 'on' state, so checked means yes.

Don't email me events

Don't — Use negative labels — 'Don't email me' makes people think twice.

Native input type=checkbox: Space toggles, screen readers announce checked state.
With the slot, the label wraps the box, so tapping the text toggles it and the row is at least 44px tall.
Groups need a fieldset + legend so the question is read with each option.
Keyboard focus shows the amber ring token around the box.