A checkbox with three sizes. It renders the control only, so pair it with your own label text (wrap both in a `<label>`) or use it inside UiFormField.
Ejemplos
Basic
Wrap the control and its label in a `<label>`.
<div class="flex flex-col gap-2">
<label class="flex items-center gap-2">
<UiCheckbox v-model="state.terms" /> Accept the terms
</label>
<label class="flex items-center gap-2 opacity-70">
<UiCheckbox :checked="true" disabled /> Pre-checked, disabled
</label>
</div>Sizes
Three sizes: sm, md and lg.
<div class="flex items-center gap-6">
<label class="flex items-center gap-2"><UiCheckbox v-model="state.s" size="sm" /> Small</label>
<label class="flex items-center gap-2"><UiCheckbox v-model="state.m" size="md" /> Medium</label>
<label class="flex items-center gap-2"><UiCheckbox v-model="state.l" size="lg" /> Large</label>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | boolean | undefined | Checked state (v-model). |
| checked | boolean | false | Uncontrolled initial checked state. |
| disabled | boolean | false | Disables the control. |
| size | string | 'md' | Control size. smmdlg |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | boolean | Emitted with the new checked state. |
change | Event | Emitted with the native change event. |