Skip to content

Switch

A switch component used to toggle between two states.

Basic Usage

Bind a boolean variable using v-model.

Disabled State

Specify whether the Switch component is disabled using the disabled attribute.

Size

Provides three sizes for the switch: large, default, and small.

Before Switch Hook

Use the before-switch attribute to execute specific logic before switching. This function needs to return a Promise.

Properties

Property NameDescriptionTypeDefault Value
v-modelBound valuebooleanfalse
disabledWhether disabledbooleanfalse
sizeSwitch size'large' | 'default' | 'small''default'
checkedWhether checkedbooleanfalse
before-switchHook function before switching() => Promise<boolean>() => Promise.resolve(true)

Events

Event NameDescriptionCallback Parameters
changeTriggered when the state changes(value: boolean)
clickTriggered when clicked(value: boolean)