Checkbox
A control that lets the user toggle between checked and not checked.
By clicking this checkbox, you agree to the terms and conditions.
<template>
<Checkbox
label="Accept terms and conditions"
description="By clicking this checkbox, you agree to the terms and conditions."
/>
</template>Props
| Name | Type | Default |
|---|---|---|
| variant | "list" | "card" | "list" |
| disabled | boolean | false |
| label | string | — |
| description | string | — |
| ...props | UCheckbox props (color, size, indicator, icon, modelValue, required, name, ...) | — |
Usage
Examples
Card variant
A single standalone agreement/opt-in checkbox — the bordered row gives it enough visual weight to stand alone on a page.
Unchecked
Checked
Disabled
<template>
<Checkbox
variant="card"
label="Accept terms and conditions"
description="By clicking this checkbox, you agree to the terms and conditions."
/>
</template>