Switch component. The switch can be toggled both by dragging and tapping. Will automatically displays a Material Design switch on Android devices.
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 the checked attribute just like with radio buttons and checkboxes.
<ons-switch checked>
</ons-switch>
To disable the switch the disabled attribute is used.
<ons-switch disabled>
</ons-switch>
ons-switch can be combined with ng-model in order to bind its value with a scope variable.
| Name | Type | Description |
|---|---|---|
| modifier | String | The appearance of the switch. Optional. |
| disabled | Whether the switch is be disabled. Optional. | |
| checked | Whether the switch is checked. Optional. | |
| input-id | String |
Specify the id attribute of the inner <input> element. This is useful when using <label for="..."> elements.
Optional.
|
| var | String | Variable name to refer this switch. Optional. Works only during initialization. |
| Name | Description |
|---|---|
| checked |
This value is true if the switch is checked.
|
| value | The current value of the input. |
| disabled | Whether the element is disabled or not. |
| checkbox | The underlying checkbox element. |
| Name | Description |
|---|---|
| material | Material Design switch |
| Signature | Description |
|---|---|
| focus() | Focuses the switch. |
| blur() | Removes focus from the switch. |
| on(eventName, listener) | Add an event listener. |
| once(eventName, listener) | Add an event listener that’s only triggered once. |
| off(eventName, [listener]) | Remove an event listener. If the listener is not specified all listeners for the event type will be removed. |
Focuses the switch.
Removes focus from the switch.
Add an event listener.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Add an event listener that’s only triggered once.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).
| Name | Description |
|---|---|
| change | Fired when the switch is toggled. |
Fired when the switch is toggled.
| 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. |
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.