OrugaSwitch
Switch between two opposing states
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| checkCheckedClass | Class of the switch check when checked. | |||
| checkClass | Class of the switch check. | |||
| checkSwitchClass | Class of the switch check. | |||
| disabledClass | Class when slider is disabled. | disabled | ||
| inputClass | Root class of the native input checkbox. | |||
| labelClass | Class of the switch label. | |||
| passiveVariantClass | Class of the switch passive variant. | passiveVariant | primary | |
| positionClass | Class of switch label position. | position | ||
| rootClass | Root class of the element. | |||
| roundedClass | Class of the switch when rounded. | rounded | ||
| sizeClass | Class of the switch size. | size | small | |
| variantClass | Class of the switch variant. | variant | primary |
Switch component
html
<o-switch></o-switch>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| ariaLabelledby | Accessibility label to establish relationship between the switch and control label' | string | - | |
| disabled | boolean | - | ||
| falseValue | Overrides the returned value when it's not checked | string|number|boolean | - | false |
| label | Input label, unnecessary when default slot is used | string | - | undefined |
| name | Name attribute on native checkbox | string | - | |
| nativeValue | Same as native value | string|number|boolean | - | |
| override | boolean | - | ||
| passiveVariant | Color of the switch when is passive, optional | string | primary, info, success, warning, danger, and any other custom color | |
| position | Label position | string | - | 'right' |
| required | boolean | - | ||
| rounded | Rounded style | boolean | - | true |
| size | Vertical size of switch, optional | string | small, medium, large | |
| trueValue | Overrides the returned value when it's checked | string|number|boolean | - | true |
| v-model | string|number|boolean | - | ||
| variant | Color of the switch, optional | string | primary, info, success, warning, danger, and any other custom color |
Events
| Event name | Properties | Description |
|---|---|---|
| update:modelValue |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $switch-active-background-color | $primary |
| $switch-action-background | #f5f5f5 |
| $switch-background | $grey-light |
| $switch-border-radius | $base-border-radius |
| $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) |
| $switch-disabled-opacity | $base-disabled-opacity |
| $switch-margin-label | 0.5em |
| $switch-padding | 0.2em |
| $switch-rounded-border-radius | $base-rounded-border-radius |
| $switch-width | 2.75 * 1em |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $switch-active-background-color | $primary |
| $switch-action-background | #f5f5f5 |
| $switch-background | $grey-light |
| $switch-border-radius | $base-border-radius |
| $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) |
| $switch-disabled-opacity | $base-disabled-opacity |
| $switch-margin-label | 0.5em |
| $switch-padding | 0.2em |
| $switch-rounded-border-radius | $base-rounded-border-radius |
| $switch-width | 2.75 * 1em |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.