Checkbox
Choose yes or no by clicking the box or its label; the tick shows the value the app accepted.
Notifications
<script setup lang="ts">import { ref } from 'vue'import { UiCard, UiStack, UiCheckbox } from 'grani' const receipt = ref(true) const reminders = ref(false) const consent = ref(false) const contract = ref(false)</script> <template> <UiCard title="Notifications" class="w-full max-w-sm"> <UiStack gap="tight"> <UiCheckbox v-model="receipt">Send me the receipt by email</UiCheckbox> <UiCheckbox v-model="reminders">Remind me three days before an invoice is due</UiCheckbox> <UiCheckbox v-model="consent"> Keep my contact details for as long as the account is open, and use them only for the receipts and the notices this account asks for </UiCheckbox> <UiCheckbox v-model="contract" required>I have read the contract</UiCheckbox> </UiStack> </UiCard></template>
Also called check box, tick box.
Usage
<UiCheckbox v-model="value">…</UiCheckbox> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValue*boolean | Whether the checkbox is checked (v-model). | |
| Behavior | ||
| indeterminateboolean= false | false | Shows a mixed state when some of the items it represents are checked. Display only. |
| valuestring | Native value submitted with the form when checked. | |
| Look | ||
| sizexs | sm | md | Step of the control ladder: the box is 16, 18 or 20 px beside text-sm. Unset, the app's size (createGrani({ size })), sm by default. | |
| Form and access | ||
| namestring | Native name for forms. | |
| idstring | Own id when standalone. Inside UiField, the field's id takes precedence. | |
| disabledboolean= false | false | Prevents toggling. |
| invalidboolean= false | false | Marks the control as invalid. Inside UiField, the error state sets this automatically. |
| ariaLabelstring | Accessible name when the slot is empty and there is no field label; slot text wins over it. | |
| requiredboolean= false | false | Standalone only: the box must be checked, said to a reader and to a form (native required), with a star after its text. Inside UiField the field's required says so. |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| A setting applied at once | Switch |
| One answer out of a few | Radio group |
| Several picks from a list in a panel | Select multiple |