Skip to content

FormSwitch

A simple checkbox replacement.

Default Component Using the Default Slot

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

Result

Disabled Component

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

Result

Component Customizing the Handle Slot

html
<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

NameTypeDefaultDescription
modelValueBooleanState of the switch

Events

NameArgumentsDescription
update:modelValuestate - Boolean with the current state of the switchEmitted when switch state changes by user interaction

Slots

NameScopedDescription
defaultContent placed within the wrapping label to the right of the switch
handleContent to place on the circular handle