Toggle buttons

Summary

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.

Status

Examples

Default toggle

Define a basic toggle button.

The label attribute is required for a screen reader to announce the button. If you want to have an actual visible label, use <aui-label>.

You can set the default checked and disabled states directly in the HTML, or using Javascript to modify the elements' attributes/properties.

Sometimes you need to provide more information relating to the state of a control. This can be achieved using the tooltip-on and tooltip-off attributes.

Asynchronous toggle

The busy property can be used to handle asynchronous requests. Bind to the change event to trigger an AJAX request and display a spinner when the toggle is pressed:

API Reference

Attributes and properties

Attributes and properties can be set and accessed directly on the aui-toggle element.

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.