Toggle skeleton state
The skeleton state is used on an initial page load to indicate that the toggle has not yet fully loaded.
toggle
23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Toggle component purpose and usage
A toggle is a control used to quickly switch between two possible states. Toggles are commonly used for on/off switches and are only used for binary actions that occur immediately after the user flips the switch.
When to use toggle
Use toggles to turn off and on a single option that affects the system or page settings. Toggles are ideal for settings or preferences that can be immediately applied. They are recommended for actions where the change is reversible without additional confirmation.
When not to use toggle
Avoid using toggles if the action requires immediate feedback or confirmation, such as deleting a file. Do not use toggles for more than two options; instead, use a dropdown, radio button, or checkbox. Avoid using toggles for settings that are not binary in nature or do not provide instant application; instead use a different UI component like a checkbox in combination with a button.
Toggle variants
The toggle component has two variants. The default toggle is used when you need to specify label text in addition to the toggle state text, and default toggles appear in forms or within full pages of information. The small toggle is used when you do not need to specify label or state text; small toggles are more compact and are used inline with other components.
Toggle feature flag label spacing change
A feature flag has been added to the toggle to adjust label spacing and change its visual appearance. When the feature flag is enabled, the spacing between the toggle's label and its container is 8px instead of 16px to improve consistency across label spacing in other components. This change applies to both default and small toggles. Once version 12 is released, this feature flag will become the default version of the component.
Default toggle anatomy
Default toggles are comprised of three elements: label text (A), toggle button (B), and state text (C). Default toggles are required to display both a component label and state text.
Small toggle anatomy
Small toggles are comprised of four optional elements: label text (A, optional), toggle button (B), state text (C, optional), and checkmark tick in the on state (D). Unlike default toggles, both label text and state text are optional for small toggles. The small toggle displays a checkmark tick in the on state to ensure the toggle is still accessible when label and state text are unavailable.
Toggle sizing
The toggle component is available in two sizes: default and small. The default toggle is larger in size than the small toggle.
Label text guidance for toggle
The label text must accompany the toggle to provide additional context and clarify its state. However, label text is optional for small toggle.
State text guidance for toggle
Use state text to describe the binary action of toggle so that the action is clear. State text must be three words or less and is displayed on the side of a toggle. State text is optional for small toggle.
Toggle language guidance
Use adjectives rather than verbs to describe actions and the state of the object affected.
Toggle states
The default and small toggle have two main states: on and off. Other interactive states are focus, disabled, read-only, and skeleton.
Toggle on state
The on state occurs when a user clicks or uses arrow keys to switch on the component.
Toggle off state
The off state occurs when a user clicks or uses arrow keys to switch off the component.
Toggle focus state
The focus state occurs when a user presses tab or clicks on the toggle. It becomes focused, indicating the user has successfully navigated to the component.
Toggle disabled state
The disabled state is used when a user is not allowed to interact with the toggle due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance.
Toggle read-only state
The read-only state is used when the user can review but not modify the component. This state removes all interactive functions like the disabled state but can still be focusable, accessible by screen readers, and passes visual contrast for readability.
Toggle mouse interaction
Toggle component is triggered on click, which switches between the on and off states. It also has a visible focus state when selected, ensuring accessibility.
Toggle keyboard navigation
For keyboard navigation, users can focus the toggle using the Tab key, providing visual feedback for keyboard users. Pressing Enter or Space changes the toggle's state between on and off.
Toggle clickable areas
The toggle component has two clickable areas: the toggle switch itself and the label associated with it. Users can click either area to change the toggle's state.
Default toggle usage context
The default toggle is larger in size than the small toggle and is commonly used in forms and can appear within full pages of information that are not restricted in space. Default toggles are required to display a visible label and state text.
Small toggle usage context
The small toggle is often used in condensed spaces and appears inline with other components or content. The label and state text are optional for the small toggle. The small toggle is more compact in size and displays a checkmark tick in the on state to ensure accessibility without requiring visible label or state text, for example, inside data table rows.