ToggleGroup
A mutually exclusive button group for single/multiple selection: single mode uses radio semantics, multiple mode uses checkbox semantics; keyboard arrow navigation and controlled value.
Single Select
Without multiple, it is single-select (role="radiogroup" + radio); value is a string, and only one item is pressed at a time.
Single select
Multiple Select
With multiple, it becomes multi-select (role="group" + checkbox); value is a JSON array string.
Multiple select
Disabled
Item-level disabled: true disables that item; disabled items are skipped in keyboard navigation.
Disabled items
Controlled Selection (value)
value is a controlled channel: a string for single select, a JSON array string for multiple; externally setting the attribute immediately reflects in the selected state (clicks inside the group also write back the attribute). The buttons below drive the selection externally:
Controlled value
Presetting value="week" / value='["bold"]' gives both groups an initial selected state; writing the value attribute externally switches the selected state immediately.
Events
Clicking or keyboard toggling dispatches oas-change; single select: detail: { value: string }, multiple select: detail: { value: string[] }.
Change events
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
items | Options JSON (property assignment reflects to attribute) | ToggleItem[] | string | [] |
multiple | Multiple mode (checkbox semantics) | boolean | — |
value | Current value: string for single; JSON array string for multiple | string | [] |
Events
| Event | Description |
|---|---|
oas-change | Toggle, detail: { value: string | string[] } |
ToggleItem fields:
| Field | Description | Type |
|---|---|---|
label | Button label | string |
value | Value (returned with events) | string |
disabled | Disable this item | boolean |
Keyboard: in single mode arrow keys move and select (radio group convention); in multiple mode arrow keys move focus (roving tabindex) and Space/Enter toggle. The container has role="radiogroup" / role="group" + aria-label; selected items expose aria-checked.