Checkbox

A native <input type="checkbox"> with Vuetify’s look. It submits with forms, resets, works with Space and Tab, and needs no JavaScript — except to set the indeterminate state.

Checked

Unchecked

Secondary

Indeterminate

Disabled

With a hint

We'll send one email a month

---
import { Checkbox } from 'bws-astro-ui';
---

<Checkbox name="newsletter" label="Send me the newsletter" checked />
<Checkbox name="newsletter" label="Send me the newsletter" color="secondary" />

color is the color of the box when it’s checked. The check mark uses the theme’s surface color, so it stays readable on solid colors in both the light and the dark theme.

Several options

Checkboxes with the same name submit every checked value:

<Checkbox name="toppings" value="cheese" label="Cheese" />
<Checkbox name="toppings" value="ham" label="Ham" />
<Checkbox name="toppings" value="olives" label="Olives" />

new FormData(form).getAll('toppings'); // ['cheese', 'olives']

For options shown as chips, see ChipGroup.

Indeterminate

indeterminate shows a dash instead of a check mark — the “some, but not all” state of a “select all” checkbox. Clicking it clears the state. In a script, set input.indeterminate:

<Checkbox id="all" label="All toppings" indeterminate />

<script>
  const all = document.getElementById('all') as HTMLInputElement;
  // … when some, but not all, items are checked:
  all.indeterminate = true;
</script>

Label with a link

I accept the terms

In a form

A checkbox submits its value (on by default) only when it’s checked. In a Form, required means it has to be checked:

<Checkbox name="terms" label="I accept the terms" rules={[required('Accept the terms')]} />

I accept the terms

Accept the terms

API

Prop	Type	Default
`label`	`string`	—
`color`	`primary` · `secondary` · `success` · `warning` · `info` · `error`	`primary`
`checked`	`boolean`	`false`
`indeterminate`	`boolean` — partly checked (a dash)	`false`
`name`, `value`	`string` — what the form submits (`value` defaults to `on`)	—
`hint`	`string`	—
`error`	`string` — starts out invalid	—
`rules`	validation rules — `required` means checked	—
`disabled`	`boolean`	`false`
`id`, `class`	`string` — `id` goes to the input, `class` to the wrapper	—

Any other attribute goes to the <input>. Slot: default — the label, replacing label.

Created by