Reference > v-ons-switch

v-ons-switch

Switch component. The switch can be toggled both by dragging and tapping. Will automatically displays a Material Design switch on Android devices.

Tutorial

Switches

A switch is an UI element that can be used to toggle between two states.

The state of a switch in Onsen UI can be changed both by dragging the knob and by tapping on the switch.

To make the switch enabled by default you can use :modelProp="true", or v-model for two-way data binding.

To disable the switch the disabled prop is used.

See also

Props

Name Type Description
disabled Boolean Whether the switch is be disabled. Optional.
inputId String Specify the id attribute of the inner <input> element. This is useful when using <label for="..."> elements. Optional.
modelEvent Boolean The native event which should trigger the update:modelValue event. Optional.
modelValue Boolean Whether the switch is checked or not. Optional.
modifier String The appearance of the switch. Optional.

Preset Modifiers

Name Description
material Material Design switch

Events

Name Description
change Fired when the switch is toggled.
update:modelValue Fired right after the event set in the modelEvent prop.
change

Fired when the switch is toggled.

Parameters
Name Type Description
event Object Event object.
event.switch Object Switch object.
event.value Boolean Current value.
event.isInteractive Boolean True if the change was triggered by the user clicking on the switch.
update:modelValue

Fired right after the event set in the modelEvent prop.

Parameters
Name Type Description

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.