Toggle Group

In single-selection mode, only one item can be active at a time — selecting a new item deselects the previous one. Set Type to ToggleGroupType.Single and bind the selected value with @bind-Value. Clicking the active item again deselects it.

Multiple-selection mode lets users activate any combination of items simultaneously. Set Type to ToggleGroupType.Multiple and bind with @bind-Values (a List<TValue>). This is ideal for text-formatting toolbars where bold, italic, and underline can all be active at once.

Use the Variant parameter to change the visual style of all items in the group. Default provides a flat appearance, while Outline adds a visible border that makes each item distinct — useful in layouts where the background is already muted.

Control the size of all items with the Size parameter. Available sizes are Small (compact toolbars), Default (standard use), and Large (touch-friendly interfaces). The size cascades to all ToggleGroupItem children automatically.

Set Disabled on the group to prevent interaction with all items at once. Individual items can also be disabled independently by setting Disabled on the ToggleGroupItem, which is useful when only certain options are unavailable.

Use the Class parameter on individual ToggleGroupItem elements to apply custom Tailwind classes. Override the active state appearance with data-[state=on]: modifiers for gradients, custom colours, or unique styling.

Add text labels alongside icons for toggle items that need clearer identification. This pattern is common in view-mode selectors where the user should understand each option at a glance without relying on icon recognition alone.

A real-world pattern combining a toggle group with a content area that changes based on the selected view. The group acts as a view-mode switcher — a common pattern in dashboards, file managers, and project-management tools.