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.
<o-switch></o-switch>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - | From config: switch: { |
customValidity | Custom HTML 5 validation error to set on the form control | string | ((currentValue: unknown, state: ValidityState) => string) | - |
|
disabled | Same as native disabled | boolean | - | false |
falseValue | Overrides the returned value when it's not checked | unknown | - | |
id | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string | - | useId() |
label | Input label, unnecessary when default slot is used | string | - | |
v-model | The input value state, use v-model to make it two-way binding | unknown | - | |
name | Name attribute on native checkbox | string | - | |
nativeValue | Same as native value | unknown | - | |
override | Override existing theme classes completely | boolean | - | |
passiveVariant | Color of the switch when is passive | string | primary , info , success , warning , danger , and any other custom color | From config: switch: { |
position | Label position | string | - | From config: switch: { |
required | Same as native required | boolean | - | false |
rounded | Rounded style | boolean | - | From config: switch: { |
size | Size of the control | string | small , medium , large | From config: switch: { |
trueValue | Overrides the returned value when it's checked | unknown | - | |
useHtml5Validation | Enable html 5 native validation | boolean | - | From config: { |
variant | Color of the control | string | primary , info , success , warning , danger , and any other custom color | From config: switch: { |
Events
Event name | Properties | Description |
---|---|---|
update:model-value | value T - updated modelValue prop | modelValue prop two-way binding |
input | value T - input valueevent Event - native event | on input change event |
focus | event Event - native event | on input focus event |
blur | event Event - native event | on input blur event |
invalid | event Event - native event | on input invalid event |
Slots
Name | Description | Bindings |
---|---|---|
default | Override the label, default is label prop |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
checkedClass | Class of the root element when checked. | modelValue | ||
sizeClass | Class of the root element with size. | size | small | |
variantClass | Class of the root element with variant. | variant | primary | |
passiveVariantClass | Class of the root element with passive variant. | passiveVariant | primary | |
positionClass | Class of the root element with position. | position | ||
disabledClass | Class of the root element when disabled. | disabled | ||
roundedClass | Class of the root element when rounded. | rounded | ||
inputClass | Class of the native input element. | |||
labelClass | Class of the switch label element. |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$switch-spacer | 0.5em |
$switch-width | 2.75em |
$switch-height | 1.5em |
$switch-background | var(--#{$prefix}grey-light) |
$switch-toggle-background | #f5f5f5 |
$switch-border | $control-border-width solid var(--#{$prefix}grey-lighter) |
$switch-border-radius | var(--#{$prefix}base-border-radius) |
$switch-border-radius-rounded | var( --#{$prefix}base-border-radius-rounded) |
$switch-checked-background | var(--#{$prefix}primary) |
$switch-disabled-opacity | var(--#{$prefix}base-disabled-opacity) |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$switch-width | 2.75em |
$switch-padding | 0.2em |
$switch-colors | dv.$colors |
$switch-background-color | css.getVar("grey-light") |
$switch-active-background-color | css.getVar("primary") |
$switch-shadow | css.getVar("shadow") |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$switch-spacer | 0.5em |
$switch-width | 2.75em |
$switch-height | 1.5em |
See ➜ 📄 Full scss file