ToggleSwitch
A sliding boolean input used to enable or disable options.
Unlike Checkbox, ToggleSwitch is meant to be used alone, not in a group.
Current styles support a single toggle switch with or without a label. The label should only be omitted here if one is added and connected with the input via the for
attribute elsewhere (like a future Field component). If you're just using this component by itself, you should include a label.
v-model
value will be boolean.
Attributes passed to input
This component will pass any HTML attributes applied to it, except for CSS class, to the <input>
element within the component.
Demos
Configurable
Name | Value |
---|---|
Props | |
disabled | |
Slots | |
default | |
View | |
Reading direction |
Default
Toggle the ToggleSwitch to see the value change. Open up the console to see emitted events.
Toggle switch value: false
With label
Adding content into ToggleSwitch's default slot will generate a <label>
element associated with the <input>
.
Usage
Props
Prop name | Description | Type | Default |
---|---|---|---|
modelValue | Current value of the toggle switch. Provided by v-model in a parent component. | boolean | false |
disabled | Whether the disabled attribute should be added to the input. | boolean | false |
Events
Event name | Properties | Description |
---|---|---|
update:modelValue | modelValue boolean - The new model value | Emitted when modelValue changes. |
Slots
Name | Description | Bindings |
---|---|---|
default | Input label content |