Switch Component

Switch component is used to represent two mutually opposing states, and users can toggle between states by clicking.

Basic Usage

Basic switch usage, bind the switch value through v-model.

Current status: On

Show Code

Disabled State

Set the disabled attribute to disable the switch.

Disabled On State:

Disabled Off State:

Show Code

Loading State

Set the loading attribute to display loading state.

Loading On State:

Loading Off State:

Show Code

Different Styles

Set the radius attribute to change the switch style, supporting default (circular) and square (square).

Default Round Style:

Square Style:

Show Code

Custom Colors

Customize the switch background colors through onBgColor and offBgColor attributes.

Custom On Color:

Custom Off Color:

Custom Both On and Off Colors:

Show Code

Different Sizes

Switch supports three sizes: small, default, and large.

Small Size:

Default Size:

Large Size:

Show Code

Custom Content

Use onContent and offContent slots to customize the switch content.

Custom Text Content:

Custom Icon Content:

Show Code

Event Handling

Switch provides a change event that is triggered when the state changes.

Listen to change event:

Event Log:

Current value: Off

Show Code

Switch API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	boolean	—	—
size	Size	string	small / default / large	default
disabled	Whether disabled	boolean	—	false
loading	Whether in loading state	boolean	—	false
radius	Button border radius type	string	default / square	default
onBgColor	Background color when on	string	—	—
offBgColor	Background color when off	string	—	—

Events

Event Name	Description	Parameters
change	Triggered when state changes	(value: boolean)

Slots

Slot Name	Description
onContent	Content when on
offContent	Content when off

Style Variables

The switch component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$theme-color-danger	Theme color - Danger
$color-white	White color
$color-black	Black color
$bg-color-default	Default background color
$opacity-disabled	Disabled state opacity
$font-size-small	Small font size
$font-size-default	Default font size
$font-size-large	Large font size