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'

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"
}
disabledSame as native disabledboolean-false
falseValueOverrides the returned value when it's not checkedstring|number|boolean-false
labelInput label, unnecessary when default slot is usedstring-
nameName attribute on native checkboxstring-
nativeValueSame as native valuestring|number|boolean-
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-true
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
v-modelstring|number|boolean-
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 - updated modelValue propmodelValue prop two-way binding
inputvalue string, number, boolean - 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 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.