Skip to content 
Switch label
This is a help text This is a help text
Switch ⚠️ Experimental
The Switch component can be used imported from:
Playground
Parameters
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
@update:modelValue | boolean | Returns the new value of the model |
@restarted | void | Emitted on value reset |
@blur | void | Emitted on blur |
@validated | boolean | Emitted when the validation status changes |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
label | span | |
help-text | span |
Parameters use
Check the documentation about how to use the parameters.
modelValue
Attention!
If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.
It's used to set the value of the component and it's reactive.
label
The z-switch component accepts a label attribute to set the text label of the component.
The slot label can also be used:
name
The name attribute is used to set the name of the component. This is useful when the component is inside a form.
help-text
The help-text attribute will provide a text if a label is used:
We can also use the help-text slot:
Flags
checked
This flag is only used to set the initial value with no control loop. Use model to handle the model properly:
disabled
The attribute disabled will block the interaction with the component.
And with labels:
required
The attribute required will set the component as required.
The default text adapts to the localization:
invalid
The invalid attribute will set the component as invalid. If a label is present a default text will be shown unless is overwritten using help-text.
The default text adapts to the localization:
Browser support
Detected engine:
Chromium
Webkit
Gecko
CodeSandbox example
Sorry, not available yet ☹️