The toggle group component provides a flexible way to present related options or actions within a single interface. It consists of multiple toggle buttons, allowing users to make either single or multiple selections depending on the configuration. This component is particularly useful for settings, filtering options, or mode switching, where users need to quickly toggle between states. By grouping these actions together, it enhances usability and keeps the interface organized, ensuring a seamless interaction experience.
- 1.Container: the structural wrapper that holds all toggle buttons together.
- 2.Icon: an optional visual element within a toggle button that helps users quickly identify its function or meaning.
- 3.Label: the textual representation inside each toggle button, describing its function or selection state.
- 4.Toggle button (selected): a button in an active state, indicating that the user has chosen this option.
- 5.Toggle button (unselected): a button in its default or inactive state. It remains visually subdued compared to the selected button but is still clearly visible and interactive, allowing users to switch selections easily.
Depending on the number of actions or options the user can select on a toggle group, there are two different variants of the component.
The single selection variant allows users to select only one option at a time. When a new option is selected, the previous one is automatically deselected. This variant is ideal for scenarios where users need to toggle between mutually exclusive options, ensuring clarity and preventing conflicting selections.
- View selection: allowing users to switch between different data presentation formats, such as grid view vs. list view in a product catalog.
- Mode switching: Enabling users to toggle between modes like light mode vs. dark mode in an interface.
- Filter selection: Helping users refine content by choosing a single category filter in dashboards or reports.
The multiple selection variant of the toggle group component allows users to select multiple options at the same time. Unlike the single selection variant, this version enables users to activate or deactivate multiple toggles independently, making it useful for scenarios where multiple choices can be applied simultaneously.
- Formatting options: enabling users to apply bold, italic, and underline text styles simultaneously in a text editor.
- Risk assessment options: underwriters can enable multiple risk factors when evaluating a client, such as pre-existing conditions, vehicle age, and past claim history.
- Filtering: allowing users to refine searches by toggling filters like "in progress", "ready to review" or "done".
- Choose the right selection mode: use single selection when only one option can be active at a time (e.g., selecting a payment method). Use multiple selection when users can activate several options simultaneously (e.g., selecting policy add-ons).
- Group related actions logically: ensure that the toggle buttons represent actions or choices that are related to each other, helping users make clear and informed selections.
- Use appropriate labels and icons: labels should be concise and self-explanatory. If using icons, ensure they clearly represent their respective actions or choices.
- Stack options based on content needs: use a horizontal layout when there are only a few options and space allows, making comparisons easier. Use a vertical layout when dealing with multiple choices or longer text labels to enhance readability.
- Be mindful of where you place the toggle group: this component is not meant to replace radio buttons, checkboxes, or switches, as it does not register selections as form inputs. If the user needs to provide structured answers, use the appropriate form elements instead.