Toggle
The Toggle component is a versatile checkbox switch that allows users to toggle between two states.
Introduction
The Toggle component typically representing an on/off or yes/no selection. It can be used in various scenarios, such as accepting terms and conditions, enabling dark mode, or switching between different options.
Visual representation
The following element is a visual representation of the toggle component which would ideally be used within a form element.
Code structure
The ` .aegov-toggle ` class is placed on the wrapper element encompassing the toggle.
<label class="aegov-toggle">
<input type="checkbox" value="" class="sr-only peer" id="RefId" role="switch">
<span class="toggle-item"></span>
<span class="sr-only">Text</span>
</label>
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Toggle with text
A Toggle switch accompanied by descriptive text that provides context for the user.
Toggle with changing icon inside
A Toggle switch with an icon inside it. The icon changes when the Toggle is switched between Yes and No states.
Toggle with colour
The ` .aegov-toggle .toggle-success ` class handles the toggle behavior. The design system has only added the aegreen colour to indicate a success on a toggle.
Toggle with mode
The "Toggle with mode" variation, users can easily switch between dark and light mode, and the icon will change accordingly from am icon of the sun to the icon of a moon. The ` .aegov-toggle .toggle-mode ` class handles the toggle behavior.
Use of secondary colour
All form elements in the UAE Design System support the use of secondary colour.
Here is an example of the button element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.
Behaviour
The Toggle component allows users to interact with it using mouse clicks or taps. When the Toggle is clicked or tapped, it switches between its on and off states, visually representing the current selection. For the Toggle with icon change, the icon inside the Toggle updates accordingly based on the current state.
Accessibility
The Toggle component is designed with accessibility in mind. It includes appropriate ARIA attributes, such as "role=switch" , to make it accessible to screen readers and assistive technologies. The sr-only class hides the checkbox visually but ensures that it is still accessible to screen readers.
By providing clear text labels or context for the Toggle, users with visual impairments can understand its purpose and state changes. Additionally, the Toggle has sufficient color contrast and focus states to aid users with low vision or motor impairments in using it effectively.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
Toggle switches are widely used in various applications and interfaces to offer users a straightforward way to control settings, enable or disable features, and make binary choices.
Where to use a toggle?
- In any situation where you need to record a True or a False indication.
- Toggle switches are used to enable or disable specific settings or preferences in websites.
- In user interfaces, toggle switches allow users to switch between dark and light mode.
- Toggle switches are employed to control privacy-related settings, such as location sharing, data tracking, or notifications.