Skip to content
On this page

Switch

Switch between two opposing states

Base

Variants

Sizes

Style variants

Class props


How does 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


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

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-switch-active-background-color$switch-active-background-color$primary
--oruga-switch-action-background$switch-action-background#f5f5f5
--oruga-switch-background$switch-background$grey-light
--oruga-switch-border-radius$switch-border-radius$base-border-radius
--oruga-switch-box-shadow$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)
--oruga-switch-disabled-opacity$switch-disabled-opacity$base-disabled-opacity
--oruga-switch-margin-label$switch-margin-label.5em
--oruga-switch-padding$switch-padding0.2em
--oruga-switch-rounded-border-radius$switch-rounded-border-radius$base-rounded-border-radius
--oruga-switch-width$switch-width2.75 * 1em

Released under the MIT License.