Design SystemComponents
Checkbox
Let users select one or more options.
Import
import { Checkbox } from "@dr-max/ui/checkbox"
The entry carries its own precompiled CSS (including the styles of the Icon, Required and Spinner parts it composes) — no extra style imports needed.
Usage
The checked state is controlled — bind it with v-model:
<script setup lang="ts">
import { Checkbox } from "@dr-max/ui/checkbox"
import { ref } from "vue"
const subscribed = ref(true)
</script>
<template>
<Checkbox v-model="subscribed" label="Send me offers by email" />
</template>
Indeterminate
Use indeterminate for a parent checkbox whose children are only partially selected:
<template>
<Checkbox v-model="allSelected" indeterminate label="Select all products" />
</template>
Required
required marks the native input as required and renders the visual required indicator:
<template>
<Checkbox v-model="agreed" label="I agree to the terms and conditions" required />
</template>
Disabled and loading
disabled disables the native input; loading shows a spinner and disables interaction:
<template>
<Checkbox v-model="unavailable" label="Unavailable option" disabled />
<Checkbox v-model="saving" label="Saving your choice" loading />
</template>
Validation errors
errors render below the checkbox once validation is touched:
You must agree to the terms
<template>
<Checkbox
v-model="agreed"
label="I agree to the terms and conditions"
:touched="true"
:errors="[{ label: 'You must agree to the terms', param: 'required' }]"
/>
</template>
Custom label
The default slot takes precedence over the label prop when the label needs markup:
<template>
<Checkbox v-model="agreed">
I agree to the <a href="/terms">terms and conditions</a>
</Checkbox>
</template>
Playground
<script setup lang="ts">
import { Checkbox } from '@dr-max/ui/checkbox'
</script>
<template>
<Checkbox label="Send me offers by email" model-value />
</template>