Skip to content

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
disabledClassClass when switch is disabled.disabled
inputCheckedClassClass of the native input element when checked.
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
switchCheckClassClass of the inner switch check.
switchCheckedClassClass of the outer switch check when checked.
switchClassClass of the outer switch check.
variantClassClass of the switch variant.variantprimary
info
warning
danger

Switch component

Switch between two opposing states

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

Props

Prop nameDescriptionTypeValuesDefault
autocompleteSame as native autocomplete options to use in HTML5 validationstring-
From config:
switch: {
  autocomplete: "off"
}
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: unknown, state: ValidityState) => string)-
disabledSame as native disabledboolean-false
falseValueOverrides the returned value when it's not checkedstring|number|boolean|object-false
idSame as native id. Also set the for label for o-field wrapper - default is an uuid.string-useId()
labelInput label, unnecessary when default slot is usedstring-
v-modelThe input value statestring|number|boolean|object-
nameName attribute on native checkboxstring-
nativeValueSame as native valuestring|number|boolean|object-
overrideOverride existing theme classes completelyboolean-
passiveVariantColor of the switch when is passivestringprimary, info, success, warning, danger, and any other custom color
From config:
switch: {
  passiveVariant: undefined
}
positionLabel positionstring-"right"
requiredSame as native requiredboolean-false
roundedRounded styleboolean-true
sizeSize of the controlstringsmall, medium, large
From config:
switch: {
  size: undefined
}
trueValueOverrides the returned value when it's checkedstring|number|boolean|object-true
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
switch: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:modelValuevalue string | number | boolean | object - updated modelValue propmodelValue prop two-way binding
inputvalue string | number | boolean | object - input value
event Event - native event
on input change event
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event

Slots

NameDescriptionBindings
defaultOverride the label, default is label prop

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$switch-active-background-colorvar(--#{$prefix}primary)
$switch-action-background#f5f5f5
$switch-backgroundvar(--#{$prefix}grey-light)
$switch-border-radiusvar(--#{$prefix}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-opacityvar(--#{$prefix}base-disabled-opacity)
$switch-margin-label0.5em
$switch-padding0.2em
$switch-rounded-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$switch-width2.75 * 1em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$switch-colorsvar.$colors
$switch-width2.75em
$switch-padding0.2em
$switch-background-colorcss.getVar("grey-light")
$switch-active-background-colorcss.getVar("primary")
$switch-shadowcss.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$switch-spacer0.5rem

See ➜ 📄 Full scss file

Released under the MIT License.