Mushilu-San UI Toggle group
A row of toggle buttons where one or several can be pressed.
Selector: mui-toggle-group
import { ToggleGroup, ToggleGroupItem } from '@mushilu-san/ui/forms';Loading example…
Overview
role="group" of items. Each item is a button with aria-pressed, so screen readers announce whether it is on.
type to single for one selected item, such as text alignment, or multiple when several can be on. value is a two-way model that holds the selected item values.
Guidelines
Do
Give every item a visible text label or an icon with an accessible label.
Don't
Do not use a toggle group for an action that does not stay pressed.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | group | aria-label when the context is not clear. |
item | — | aria-pressed reflects the on state. aria-disabled when disabled. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace |
Label the group so screen reader users know what the choice is for.
API
ToggleGroup
| Name | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | 'single' | `single` allows one pressed item; `multiple` allows several. Default `single`. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of every item: `sm`, `md` or `lg`. Default `md`. |
variant | 'default' | 'outline' | 'default' | Visual style: `default` or `outline`. Default `default`. |
disabled | boolean | false | Disables every item in the group. Accepts attribute presence, e.g. <… disabled>. |
| Name | Type | Default | Description |
|---|---|---|---|
value | string | '' | For single mode: the selected value (string). For multiple: comma-joined string of selected values. |
CSS parts
::part(root)
ToggleGroupItem
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Value this item represents. It is the value written to the group's `value` model. |
disabled | boolean | false | Disables this item only. Accepts attribute presence, e.g. <… disabled>. |
CSS parts
::part(button)::part(root)
Tokens
--mui-color-primary--mui-color-primary-text--mui-color-border--mui-color-focus-ring--mui-touch-target