A toggle button provides a quick way to see whether a given option is enabled or disabled and to toggle between these states. Place a toggle button to the right of a label, in a table, or below a section describing what is enabled or disabled.
A toggle button should be used if the main intent is to make a binary choice, such as turning something on or off, and the choice is not part of a form.
|Web resource key:||
|AMD Module key:||N/A|
|Web Component API:||5.9|
Define a basic toggle button.
label attribute is required for a screen reader to announce the button. If you want to have an
actual visible label, use
You can set the default
disabled states directly in the HTML, or
Sometimes you need to provide more information relating to the state of a control. This can be achieved using the
busy property can be used to handle asynchronous requests. Bind to the
to trigger an AJAX request and display a spinner when the toggle is pressed:
Attributes and properties
Attributes and properties can be set and accessed directly on the
However keep in mind that for IE11 if you render the component and try to access the
checked attribute directly after that
(in the same event loop) the attribute won't be there yet. Also trying to access internals of the component will cause errors, e.g.
This is caused by the fact that IE11 does not support webcomponents and needs polyfills. In result the web component lifecycle runs a bit later than in other browsers there.
Text used by screen readers when announcing the toggle button (required for accessibility).
||Boolean||If set, the toggle will be set to the 'on' state.|
||Boolean||If set, the user will not be able to interact with the toggle.|
HTML5 attribute. Not supported in IE10 or older.
||String||The value associated with the toggle button element (sent on form submission).|
Sets the toggle to a busy state, displaying the busy spinner.
Sets the tooltip text that is shown when the toggle is set to the ‘on’ state.
Sets the tooltip text that is shown when the toggle is set to the ‘off’ state.