Toggle Button
Toggle button is used to select a boolean value using a button.
Note: On-click toggle functionality is not working under both basic and customized variants.
When to use
- Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.
Guidelines
- Toggles are best for settings requiring on/off or hide/show functionality for displaying results.
- Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply to the new state.
- Only use when a single selection is required and offering two options eg. on/off type of decision.
- When deciding between a checkbox and toggle switch control, think about the context of use.
- Keep labels short and concise.
- Ensure they are used consistently throughout the application or service.
- Both on/off states should be distinctively different.
Basic
Basic toggle can be achieved using toggle attribute.
<button id="basic-toggle" type="button" class="btn btn-tertiary" data-bs-toggle="button" autocomplete="off">No</button>
Customized
Icons and labels can be customized through i tag.
<button id="custom-toggle" type="button" class="btn btn-tertiary" data-bs-toggle="button" autocomplete="off"><i class="ds ds-user me-3"></i>I Reject</button>
Accessibility
- The markup for the toggle uses standard HTML for a checkbox, so it has the built-in accessibility requirements, therefore no need for ARIA tags.
- For keyboard-only users, the toggle focus is made obvious.
- The label tag surrounds the input and the toggle code.
- The Tab key is used to move the focus to each toggle control. Either the Enter or Space key can be used to toggle between a checked or unchecked position.