Skip to content
On this page

Switch

Switch between two opposing states

Examples

Base

Show code

Variants

Show code

Sizes

Show code

Customise

Show code

Class props

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
checkCheckedClassClass of the switch check when checked.
checkClassClass of the switch check.
checkSwitchClassClass of the switch check.
disabledClassClass when slider is disabled.disabled
inputClassRoot class of the native input checkbox.
labelClassClass of the switch label.
passiveVariantClassClass of the switch passive variant.passiveVariantprimary
info
warning
danger
positionClassClass of switch label position.position
rootClassRoot class of the element.
roundedClassClass of the switch when rounded.rounded
sizeClassClass of the switch size.sizesmall
medium
large
variantClassClass of the switch variant.variantprimary
info
warning
danger

Switch component

html
<o-switch></o-switch>

Props

Prop nameDescriptionTypeValuesDefault
ariaLabelledbyAccessibility label to establish relationship between the switch and control label'string-
disabledboolean-
falseValueOverrides the returned value when it's not checkedstring|number|boolean-false
labelInput label, unnecessary when default slot is usedstring-undefined
nameName attribute on native checkboxstring-
nativeValueSame as native valuestring|number|boolean-
overrideboolean-
passiveVariantColor of the switch when is passive, optionalstringprimary, info, success, warning, danger, and any other custom color
positionLabel positionstring-'right'
requiredboolean-
roundedRounded styleboolean-true
sizeVertical size of switch, optionalstringsmall, medium, large
trueValueOverrides the returned value when it's checkedstring|number|boolean-true
v-modelstring|number|boolean-
variantColor of the switch, optionalstringprimary, info, success, warning, danger, and any other custom color

Events

Event namePropertiesDescription
update:modelValue

Slots

NameDescriptionBindings
default

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$switch-active-background-color$primary
$switch-action-background#f5f5f5
$switch-background$grey-light
$switch-border-radius$base-border-radius
$switch-box-shadow0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05)
$switch-disabled-opacity$base-disabled-opacity
$switch-margin-label0.5em
$switch-padding0.2em
$switch-rounded-border-radius$base-rounded-border-radius
$switch-width2.75 * 1em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$switch-active-background-color$primary
$switch-action-background#f5f5f5
$switch-background$grey-light
$switch-border-radius$base-border-radius
$switch-box-shadow0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05)
$switch-disabled-opacity$base-disabled-opacity
$switch-margin-label0.5em
$switch-padding0.2em
$switch-rounded-border-radius$base-rounded-border-radius
$switch-width2.75 * 1em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$switch-spacer0.5rem

See ➜ 📄 Full scss file

Released under the MIT License.