Toggle Group is a collection of toggle buttons that supports the 'on' or 'off' state of a single or multiple toggle buttons.
Basic Definition#
Types#
Toggle Groups are categorized into two types: basic and compact.
- Basic: relatively loose layout.
- Compact: relatively tight layout, visually more concise.
Multi-Selection#
Toggle Groups support multi-selection, maintaining consistent styling with single-selection.
Elements#
Toggle Groups typically consist of text/icons, which form the button's display content. They can appear individually or in combination.
- Icon
- Text
- Divider
Based on combinations, there are the following types:
- Pure text button
- Left icon + text
- Right icon + text
- Pure icon button
Interaction States#
Different types of buttons have four states: default, disabled, hover, and focused.
Sizes#
Toggle Groups come in two sizes: medium and small.
Usage#
When to Use#
- When users need to select one or multiple options from a group, such as "small, medium, large" in layout adjustments.
When Not to Use#
- If there are too many options, consider using a dropdown.
- If used in forms, choose radio buttons or checkboxes for form data entry and submission scenarios.