A switch for boolean settings, in two sizes and three colours, with a read-only mode.
Ejemplos
Colours
Three active colours: primary, green and red.
<div class="flex items-center gap-6">
<label class="flex items-center gap-2">
<UiToggle v-model="state.on" /> Notifications
</label>
<UiToggle v-model="state.a" color="green" />
<UiToggle v-model="state.b" color="red" />
</div>Sizes and states
Two sizes (sm, md), plus disabled and read-only. Read-only keeps normal styling but ignores taps; disabled dims it.
<div class="flex flex-wrap items-center gap-6">
<label class="flex items-center gap-2 text-sm"><UiToggle v-model="state.sm" size="sm" /> Small</label>
<label class="flex items-center gap-2 text-sm"><UiToggle v-model="state.md" size="md" /> Medium</label>
<label class="flex items-center gap-2 text-sm text-gray-400"><UiToggle v-model="state.d" disabled /> Disabled</label>
<label class="flex items-center gap-2 text-sm"><UiToggle :model-value="true" readonly /> Read-only</label>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | boolean | false | On/off state (v-model). |
| disabled | boolean | false | Disables the switch. |
| readonly | boolean | false | Prevents changes but keeps normal styling. |
| size | string | 'md' | Switch size. smmd |
| color | string | 'primary' | Active colour. primarygreenred |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | boolean | Emitted with the new state. |