Switch
An on/off switch.
Showcase
Source
<Switch />
<Switch disabled>
<span class="ml">No luck</span>
</Switch>Properties #
Style Properties
Name | Default | Type | Description |
|---|---|---|---|
slotLeft | false | boolean | Whether to place the default slot to the left of the switch or to the right. |
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
value | false | boolean | Whether the switch is currently on. |
disabled | false | boolean | Disables the switch. |
... | any | Everything else will be passed to the underlying <input> element. |
Class Properties
All <Switch> components use the .switch class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
class | null | string | A class string to add to the component. |
inputClass | null | string | A class string to add to the <input> inside. |
trackClass | null | string | A class string to add to the track of the switch. |
thumbClass | null | string | A class string to add to the thumb of the switch. |
Events #
Name | Event Detail | Description |
|---|---|---|
change | { value, nativeEvent } | Fires when a switch is toggled. The value corresponds to the current value of the value property, the nativeEvent contains the native change event. |
Slots #
Default slot
The label of the switch. Positioned to the right of the switch by default, but can be moved to the left using the slotLeft property.
SCSS Variables #
Name | Description | Default |
|---|---|---|
$main | The color of the switch in the "on" position. | #4300B0 |
$disabled | The color of the disabled switch. | #888888 |
$off-state | The color of the switch in the "off" position. | #AAAAAA |
$font | The font used for the labels. | 'Ubuntu' |