Skip to content

Switch

The Switch input component — sometimes called "toggle" — offers a choice between one of two values; it's a great option when you want the user to toggle a feature on or off. This component implements the W3C ARIA APG Switch Pattern. Use it with the Field component to access all the functionalities.

Examples

Base

The default value of a checkbox is false when unchecked and true wenn checked. Use the true-value and false-value properties to specify different value that will be used as the modelValue property when the specific radio is checked and unchecked

Variants

Different styles can be achieved with the variant prop.

Sizes

The component can be displayed in different sizes using the size prop.

Customise

By default, the component supports a label which is displayed to the right of the toggle unless the position prop is set to "left".

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 checkedunknown-
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 state, use v-model to make it two-way bindingunknown-
nameName attribute on native checkboxstring-
nativeValueSame as native valueunknown-
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-
From config:
switch: {
  right: "position"
}
requiredSame as native requiredboolean-false
roundedRounded styleboolean-
From config:
switch: {
  rounded: true
}
sizeSize of the controlstringsmall, medium, large
From config:
switch: {
  size: undefined
}
trueValueOverrides the returned value when it's checkedunknown-
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:model-valuevalue T - updated modelValue propmodelValue prop two-way binding
inputvalue T - 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

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
checkedClassClass of the root element when checked.modelValue
sizeClassClass of the root element with size.sizesmall
medium
large
variantClassClass of the root element with variant.variantprimary
info
warning
danger
passiveVariantClassClass of the root element with passive variant.passiveVariantprimary
info
warning
danger
positionClassClass of the root element with position.position
disabledClassClass of the root element when disabled.disabled
roundedClassClass of the root element when rounded.rounded
inputClassClass of the native input element.
labelClassClass of the switch label element.

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$switch-spacer0.5em
$switch-width2.75em
$switch-height1.5em
$switch-backgroundvar(--#{$prefix}grey-light)
$switch-toggle-background#f5f5f5
$switch-border$control-border-width solid var(--#{$prefix}grey-lighter)
$switch-border-radiusvar(--#{$prefix}base-border-radius)
$switch-border-radius-roundedvar( --#{$prefix}base-border-radius-rounded)
$switch-checked-backgroundvar(--#{$prefix}primary)
$switch-disabled-opacityvar(--#{$prefix}base-disabled-opacity)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$switch-width2.75em
$switch-padding0.2em
$switch-colorsdv.$colors
$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.5em
$switch-width2.75em
$switch-height1.5em

See ➜ 📄 Full scss file

Released under the MIT License.