Skip to content


Switch is a checkbox that is styled to look like a switch button.

Basic usage

Use o variants to determine component colors.

Light style

If you want to use the light style, set the light attribute to true.

Custom dot color

Don't like the theme color? Switch provides access to custom colors.

You can set the o variant to a custom active color. Set the background-color attribute to an unactive color.


Besides the default size, Switch provides three additional sizes for you to choose among different scenarios.

Use the attribute size to set additional sizes with sm,md,lg.


The disabled attribute determines if the switch is disabled.

Use the disabled attribute to determine whether a switch is disabled. Switch accepts a Boolean value.

Icon Slots


Switch Props

modelValue / v-modelbooleanfalseBinding value.
size 'sm' | 'md' | 'lg''md'Switch size.
o'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info''primary'Switch type.
lightbooleanfalseDetermine whether it's a light switch.
disabledbooleanfalseDisable the switch.
background-colorstringundefinedCustom the switch dot or background color.

MIT Licensed