Toggle button
ToggleButton allows users to switch between two states, typically representing an on/off or active/inactive status. The corresponding action takes effect immediately. With ToggleButtonGroup, users can make a single selection from a set of related commands, with only one option selected at a time.
A ToggleButtonGroup allows users to make a single selection from a set of related commands, with only one option selected at a time.
- To reduce visual noise and mitigate alignment issues, use icons in toggle button labels consistently across all options in a toggle button group.
- A toggle button group should always contain two or more options related by function or context. For example, text alignment (left, center, right, justified) or risk level (high, medium, low).
By default, a toggle button group has horizontal alignment. To present the options in a stacked layout, orientate the group vertically using the orientation=”vertical” prop.
When oriented vertically, the group will resize to fit the longest toggle button, with all other buttons in the group extending to fill the same width.
Setting the toggle button group as read-only using the readOnly prop will render the toggle button group in a non-interactive state and with read-only styles. This is useful for scenarios where users need to view the current selection, but may not have the right permissions to change it.
If a toggle button is in a selected state within a read-only toggle button group, it will retain its visual style to indicate selection and remain focusable via keyboard navigation, ensuring that users can perceive the selection through assistive technologies.
Disabling a toggle button group using the disabled prop will suppress functionality for all buttons within it.
Disable or Read-Only: Disable the group when it isn't relevant or permitted in the current user flow. In this state, it won't be focusable for screen readers. Set the group to read-only when it's important for the user to know which option is currently selected. When set to read-only, the selected button will still be focusable for screen readers but will be indicated as non-interactive.
Sentiment can be set on a toggle button group or individual buttons within a group. Setting sentiment on individual buttons allows for a mixed group.
Set sentiment by using the sentiment prop, either on the group or on individual toggle buttons within the group.
The appearance prop allows you to define the appearance for all buttons in the toggle button group.
- Set Appearance on the Group: Although it's possible to mix sentiment within a group, it isn't recommended to do the same with appearance as it can lead to visual inconsistency and diminish clarity for the user.
You can manage the state of the toggle button group externally using the value and onChange props. This approach provides greater control over the component's behavior and enables synchronization with other parts of your application.
Standalone toggle buttons should be used sparingly, as other selection controls are often preferred. They are best for switching between two distinct states (i.e, yes/no, on/off, show/hid). Consider alternative controls to enhance user experience based on the context.
Switch: Provides a clear visual indication of the current state and is commonly used to turn features on or off.RadioButtonGroup: Preferred for boolean selections in forms or data input, especially when additional choices like "yes", "no" or "not applicable" are needed.Dropdown: Ideal for boolean options when space is limited, favoring clear text labels over a simple switch.
- Switching icon variants or entire icons based on the selection state of the toggle button can help communicate the current state of the button.
- Follow
Button's best practices for accessibility and interaction.
A ToggleButtonGroup allows users to make a single selection from a set of related commands, with only one option selected at a time.
- To reduce visual noise and mitigate alignment issues, use icons in toggle button labels consistently across all options in a toggle button group.
- A toggle button group should always contain two or more options related by function or context. For example, text alignment (left, center, right, justified) or risk level (high, medium, low).
By default, a toggle button group has horizontal alignment. To present the options in a stacked layout, orientate the group vertically using the orientation=”vertical” prop.
When oriented vertically, the group will resize to fit the longest toggle button, with all other buttons in the group extending to fill the same width.
Setting the toggle button group as read-only using the readOnly prop will render the toggle button group in a non-interactive state and with read-only styles. This is useful for scenarios where users need to view the current selection, but may not have the right permissions to change it.
If a toggle button is in a selected state within a read-only toggle button group, it will retain its visual style to indicate selection and remain focusable via keyboard navigation, ensuring that users can perceive the selection through assistive technologies.
Disabling a toggle button group using the disabled prop will suppress functionality for all buttons within it.
Disable or Read-Only: Disable the group when it isn't relevant or permitted in the current user flow. In this state, it won't be focusable for screen readers. Set the group to read-only when it's important for the user to know which option is currently selected. When set to read-only, the selected button will still be focusable for screen readers but will be indicated as non-interactive.
Sentiment can be set on a toggle button group or individual buttons within a group. Setting sentiment on individual buttons allows for a mixed group.
Set sentiment by using the sentiment prop, either on the group or on individual toggle buttons within the group.
The appearance prop allows you to define the appearance for all buttons in the toggle button group.
- Set Appearance on the Group: Although it's possible to mix sentiment within a group, it isn't recommended to do the same with appearance as it can lead to visual inconsistency and diminish clarity for the user.
You can manage the state of the toggle button group externally using the value and onChange props. This approach provides greater control over the component's behavior and enables synchronization with other parts of your application.
Standalone toggle buttons should be used sparingly, as other selection controls are often preferred. They are best for switching between two distinct states (i.e, yes/no, on/off, show/hid). Consider alternative controls to enhance user experience based on the context.
Switch: Provides a clear visual indication of the current state and is commonly used to turn features on or off.RadioButtonGroup: Preferred for boolean selections in forms or data input, especially when additional choices like "yes", "no" or "not applicable" are needed.Dropdown: Ideal for boolean options when space is limited, favoring clear text labels over a simple switch.
- Switching icon variants or entire icons based on the selection state of the toggle button can help communicate the current state of the button.
- Follow
Button's best practices for accessibility and interaction.
A ToggleButtonGroup allows users to make a single selection from a set of related commands, with only one option selected at a time.
- To reduce visual noise and mitigate alignment issues, use icons in toggle button labels consistently across all options in a toggle button group.
- A toggle button group should always contain two or more options related by function or context. For example, text alignment (left, center, right, justified) or risk level (high, medium, low).
By default, a toggle button group has horizontal alignment. To present the options in a stacked layout, orientate the group vertically using the orientation=”vertical” prop.
When oriented vertically, the group will resize to fit the longest toggle button, with all other buttons in the group extending to fill the same width.
Setting the toggle button group as read-only using the readOnly prop will render the toggle button group in a non-interactive state and with read-only styles. This is useful for scenarios where users need to view the current selection, but may not have the right permissions to change it.
If a toggle button is in a selected state within a read-only toggle button group, it will retain its visual style to indicate selection and remain focusable via keyboard navigation, ensuring that users can perceive the selection through assistive technologies.
Disabling a toggle button group using the disabled prop will suppress functionality for all buttons within it.
Disable or Read-Only: Disable the group when it isn't relevant or permitted in the current user flow. In this state, it won't be focusable for screen readers. Set the group to read-only when it's important for the user to know which option is currently selected. When set to read-only, the selected button will still be focusable for screen readers but will be indicated as non-interactive.
Sentiment can be set on a toggle button group or individual buttons within a group. Setting sentiment on individual buttons allows for a mixed group.
Set sentiment by using the sentiment prop, either on the group or on individual toggle buttons within the group.
The appearance prop allows you to define the appearance for all buttons in the toggle button group.
- Set Appearance on the Group: Although it's possible to mix sentiment within a group, it isn't recommended to do the same with appearance as it can lead to visual inconsistency and diminish clarity for the user.
You can manage the state of the toggle button group externally using the value and onChange props. This approach provides greater control over the component's behavior and enables synchronization with other parts of your application.
Standalone toggle buttons should be used sparingly, as other selection controls are often preferred. They are best for switching between two distinct states (i.e, yes/no, on/off, show/hid). Consider alternative controls to enhance user experience based on the context.
Switch: Provides a clear visual indication of the current state and is commonly used to turn features on or off.RadioButtonGroup: Preferred for boolean selections in forms or data input, especially when additional choices like "yes", "no" or "not applicable" are needed.Dropdown: Ideal for boolean options when space is limited, favoring clear text labels over a simple switch.
- Switching icon variants or entire icons based on the selection state of the toggle button can help communicate the current state of the button.
- Follow
Button's best practices for accessibility and interaction.