# Switch

Switch between two opposing states


edit on github

# Examples

# Base

# Variants

# Sizes

# Style variants

# Props

Prop name Description Type Values Default
nativeValue Same as native value string|number|boolean -
disabled boolean -
variant Color of the switch, optional string primary, info, success, warning, danger, and any other custom color
passiveVariant Color of the switch when is passive, optional string primary, info, success, warning, danger, and any other custom color
name Name attribute on native checkbox string -
required boolean -
size Vertical size of switch, optional string small, medium, large
trueValue Overrides the returned value when it's checked string|number|boolean - true
falseValue Overrides the returned value when it's not checked string|number|boolean - false
rounded Rounded style boolean - true
outlined Outlined style boolean - false
rootClass string -
disabledClass string -
checkClass string -
roundedClass string -
outlinedClass string -
labelClass string -
sizeClass string -
variantClass string -
passiveVariantClass string -
animationClass string -

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-switch-active-background-color-opacity $switch-active-background-color-opacity 0.9
--oruga-switch-active-background-color $switch-active-background-color $primary
--oruga-switch-active-box-shadow-color $switch-active-box-shadow-color #b5b5b5
--oruga-switch-active-box-shadow-length $switch-active-box-shadow-length 0 0 0.5em
--oruga-switch-active-box-shadow-opacity $switch-active-box-shadow-opacity 0.6
--oruga-swtich-action-background $swtich-action-background #f5f5f5
--oruga-switch-background $switch-background #b5b5b5
--oruga-switch-border-radius $switch-border-radius $base-border-radius
--oruga-switch-box-shadow $switch-box-shadow 0 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-checked-box-shadow-color $switch-checked-box-shadow-color $switch-active-background-color
--oruga-switch-checked-box-shadow-length $switch-checked-box-shadow-length 0 0 0.5em
--oruga-switch-checked-box-shadow-opacity $switch-checked-box-shadow-opacity 0.8
--oruga-switch-disabled-opacity $switch-disabled-opacity $base-disabled-opacity
--oruga-switch-hover-background-color $switch-hover-background-color rgba(#b5b5b5, 0.9)
--oruga-switch-hover-border-color-opacity $switch-hover-border-color-opacity 0.9
--oruga-switch-hover-border-color $switch-hover-border-color #b5b5b5
--oruga-switch-label-padding $switch-label-padding 0 0 0 .5em
--oruga-switch-margin-sibling $switch-margin-sibling 0.5em
--oruga-switch-outlined-background $switch-outlined-background #b5b5b5
--oruga-switch-outlined-border-color-opacity $switch-outlined-border-color-opacity 0.9
--oruga-switch-outlined-border-color $switch-outlined-border-color $switch-outlined-background
--oruga-switch-outlined-border-style $switch-outlined-border-style solid
--oruga-switch-outlined-border-width $switch-outlined-border-width .1rem
--oruga-switch-padding $switch-padding 0.2em
--oruga-switch-rounded-border-radius $switch-rounded-border-radius $base-rounded-border-radius
--oruga-switch-width-number $switch-width-number 2.75
--oruga-switch-width $switch-width $switch-width-number * 1em