Actions
Toggle group
Combines related toggles into one control surface.
Usage
Anatomy
The parts and how they nest, taken from the preview above.
Examples
Paragraph alignment
Choose one alignment for the paragraph.
Text formatting
Combine bold, italic, and underline.
Canvas layout
Use a vertical group when the tools sit beside a canvas.
Icon sizes and separators
Outlined icon toggles share a joined border and inherit their group size.
Disabled groups and items
Disable a whole group or skip an unavailable item during keyboard navigation.
With tooltips
Name icon controls and provide the same label on hover and focus.
Recommendations
| Guidance | Practice |
|---|---|
| Do | Group related formatting or selection options. Name icon-only toggles and make selected states visible. |
Usage boundaries
| Guidance | Boundary |
|---|---|
| Scope | Use Segmented Control for a single choice. Use Toolbar when the group also contains unrelated commands. |
API reference
Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.
| Prop | Type | Default | Description |
|---|---|---|---|
| | — | Groups related toggles with shared size and appearance. |
| | — | Controls selected values; an empty array clears the group. |
| | — | Sets the initial selected values. |
| | "horizontal" | Sets the layout and keyboard direction. |
| | "default" | Sets the shared size for child toggles. |
| | "default" | Sets the shared default or outline treatment. |
| | — | Inherits size and variant from its group. Toggle remains a compatible item alias. |
| | orientation="vertical" | A visual divider in joined outline groups. Use horizontal orientation for a vertical group. |
| | false | Allows several values to be selected. Both modes allow an empty array. |
| | false | Disables every item. Individual items can also be disabled. |
| | true | Wraps arrow-key focus at either end of the group. |
| | — | Receives the next selection array. Cancel the event details to veto the change. |