Checkbox

Turns an option on or off, alone or as one of several independent choices.

Refined portWildCheckbox.vueForms/CheckboxWCheckbox

Try it

Click the label or the box, or tab to it and press Space.

Send alertsEvery reading outside the threshold

Size

Indeterminate

Error

Disabled

<WildCheckbox
  v-model="checked"
  size="md"
  label="Send alerts"
  sub="Every reading outside the threshold" />

When to use

Use a checkbox for an option that takes effect when the form is saved.
Use one per option when several can be on at once.
Use indeterminate on a “select all” row when only some of the rows beneath it are checked.

Don’t use it

For a setting that applies straight away. Use a toggle.
To pick one option from a set. Use a radio group.

Anatomy

A box, a tick, and an optional label with a sub-line. The label and sub-line are part of the target.

Send alertsSend alertsEvery reading outside the thresholdInclude archived sites

<WildCheckbox v-model="checked" label="Send alerts" />
<WildCheckbox
  v-model="checked"
  label="Send alerts"
  sub="Every reading outside the threshold" />

Sizes

Two sizes, 16px and 14px. The default is md.

md · 16

sm · 14

Use sm in dense rows, such as the header of a data grid, where it sits beside 11px labels.

States

Off, on and indeterminate, against each interaction state.

rest

hover

focus

error

unchecked

checked

indeterminate

Keyboard focus is a ring outside the box, so it shows on every fill.

Send alerts

disabled

Send alerts

disabled · checked

Disabled dims the whole row to 50%, label included.

Accessibility

A screen reader hears the label, then checked, not checked or mixed. A checkbox with no visible label needs ariaLabel.

Key	What it does
Tab	Moves focus to the checkbox. A disabled one is skipped.
Space	Ticks or clears it. Indeterminate becomes checked.

Props

Prop	Type	Default	Description
checked	boolean	false	Whether the box is ticked.
indeterminate	boolean	false	Shows the dash, whatever checked says.
onChange	(checked: boolean) => void	—	Makes it operable. Called with the next value.
label	ReactNode	—	Text beside the box. Part of the target.
sub	string	—	A second line under the label.
size	'md' \| 'sm'	'md'	16px or 14px.
disabled	boolean	false	Dims the row and leaves the tab order.
state	'rest' \| 'hover' \| 'active' \| 'focus' \| 'error'	—	Forces a frame. Use error for a failed field.
ariaLabel	string	—	Accessible name when there is no label.

Tokens

Token	Value	Where it lands
--radius-sm	4px	Box corners.
--color-primary	#00AEEF	Checked and indeterminate fill.
--color-primary-active	#1877F2	Checked fill on hover, and the focus ring.
--global-blue-1000	#1877F2	Unchecked border on hover, 4.2:1. It stays darker than the resting grey.
--global-neutral-grey-900	#7F7D83	Unchecked border, 4.1:1. A disabled box keeps a lighter grey.
--color-error	#E12121	Error border and fill.
(no token)	1px gap, 2px ring	Keyboard focus, outside the box.