Appearance

Checkbox ​

Use a checkbox when selecting multiple options from a list or turning an item on / off. They are used in most forms that require a save or add action.

Checkbox is a type of input that falls into the selection control family. This also includes radio group and switch. Only the UI in switch and checkbox is different, the code is identical.

Single variant
Standard

The size of the checkbox never changes. Label and hint text can be any width or wrap to multiple lines depending on use case.

Basic Usage ​

template
<Checkbox v-model:checked="isCheckedLabel" name="checkbox-label" label="With a label" />

Playground ​

Anatomy ​

  1. Checkbox field (target size)
  2. Checkbox
  3. Label Text
  4. Hint Text
  5. Icon

Standalone ​

Standalone checkboxes can be used to select items like rows in a table

Checked: false

vue
<Checkbox
  v-model:checked="isChecked"
  id="checkbox-1"
  name="checkbox-1"
/>

Multiline ​

template
<Checkbox
  label="I swear on my stash that (a) my details are rock-solid, no munchie-induced memory lapses here, and (b) my entity is alive and well, not vanished like that last bit of smoke from a well-enjoyed joint."
/>

Indeterminate ​

A Checkbox can be made indeterminate by setting the indeterminate property

Checked: false

vue
<Checkbox indeterminate label="Indeterminate" />
<Checkbox disabled indeterminate label="Indeterminate and disabled" />

Hint text ​

Provided as a prop

Hint text as a prop
vue
<Checkbox hint-text="Hint text as a prop" label="Opt in" />

Provided as a slot

Hint text as a slot
vue
<Checkbox label="Opt in">
  <template #hint>
    Hint text as a <strong>slot</strong>
  </template>
</Checkbox>

Error text ​

Please read and agree to the terms and conditions
vue
<Checkbox error-text="Please read and agree to the terms and conditions" label="I have read and agree to the terms and conditions" />

Disabled ​

Checkboxes can be disabled by setting the disabled property

Can't touch this
vue
<Checkbox disabled label="Checked" />
<Checkbox disabled label="Unchecked" hint-text="Can't touch this" />

Checkbox Values ​

A string or number representing the value of the checkbox.


Checked: [ "1" ]
ts
const checkboxesWithValues = ref([
  {
    label: 'Checkbox 1',
    id: 'checkbox-value-1',
    name: 'checkbox-value-1',
    value: '1',
    checked: true,
  },
  {
    label: 'Checkbox 2',
    id: 'checkbox-value-2',
    name: 'checkbox-value-2',
    value: '2',
    checked: false,
  },
  {
    label: 'Checkbox 3',
    id: 'checkbox-value-3',
    name: 'checkbox-value-3',
    value: '3',
    checked: false,
  },
]);
const selectedCheckboxValues = computed(() => {
  return checkboxesWithValues.value.filter((input) => input.checked).map((input) => input.value)
})
vue
<Checkbox
  v-for="checkbox in checkboxesWithValues"
  v-bind="checkbox"
  v-model:checked="checkbox.checked"
/>
Checked: {{ selectedCheckboxValues }}

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.