Toggle group

Use a toggle group when several related options share one decision, such as choosing the work order view. Use a single-select group for mutually exclusive views and a multiple-select group when each option can be enabled independently.

ListBoardCalendar

Showing work orders in list view.

Show codeCopy

Composition

Set type="single" or type="multiple", give every ToggleGroupItem a stable value, and control the selected value when it drives surrounding content. Use spacing={0} with variant="outline" for a connected segmented control; add spacing when each option should read as an individual button.

Accessibility

Give the group an accessible name with aria-label or a visible label. Each item needs a concise, unique name and remains keyboard reachable. Preserve the selected state exposed by the primitive and keep the resulting view or filter clear in nearby content.

Best practices

• Use type="single" for one view or mode and type="multiple" for independent filters.
• Do not allow an empty single selection when the surrounding view always requires a mode.
• Keep item labels short and use the same variant and size across the group.