Checkbox

Custom styled checkbox with support for single boolean binding and checkbox groups via array v-model.

ExamplesCodeUsageChangelog

Examples

Single checkbox

I agree to the terms and conditions

Tailwind v4

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <Checkbox v-model="agreed" label="I agree to the terms and conditions" />
</template>

Checkbox group

Pass an array as v-model and a value prop on each checkbox to track selections.

Crusher RunScreeningsGabion Stone

Tailwind v4

<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

<template>
  <Checkbox v-model="selected" value="crusher" label="Crusher Run" />
  <Checkbox v-model="selected" value="screenings" label="Screenings" />
  <Checkbox v-model="selected" value="gabion" label="Gabion Stone" />
</template>

Disabled

Unchecked disabledChecked disabled

Tailwind v4

<Checkbox :model-value="false" disabled label="Unchecked disabled" />
<Checkbox :model-value="true" disabled label="Checked disabled" />

Props

Prop	Type	Default	Description
modelValue	boolean | unknown[]	—	Bound value; use array for checkbox groups
value	unknown	—	Item value for checkbox group mode
label	string	—	Text label rendered beside the checkbox
disabled	boolean	false	Prevents interaction and dims the control

Emits

Event	Payload	Description
update:modelValue	boolean | unknown[]	New value after toggle

Slots

None — use the label prop for text.