FormSwitch

A simple checkbox replacement.

Default Component Using the Default Slot

<form-switch v-model="state" class="flex items-center space-x-2">
    <span>{{ state ? 'on' : 'off' }}</span>
</form-switch>

Result

off

Disabled Component

<form-switch :disabled="true" />

Result

Component Customizing the Handle Slot

<form-switch v-model="state">
    <template #handle>
        <x-mark-icon class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-3 text-vxvue-300" />
    </template>
</form-switch>

Result

Properties

Name	Type	Default	Description
modelValue	Boolean		State of the switch

Events

Name	Arguments	Description
update:modelValue	state - Boolean with the current state of the switch	Emitted when switch state changes by user interaction

Slots

Name	Scoped	Description
default		Content placed within the wrapping label to the right of the switch
handle		Content to place on the circular handle