ActionGroup

ActionGroup clusters a set of related actions into a single segmented control. It can be presented as plain buttons or, with a selectionMode, as a single- or multiple-select toggle group driven by an items collection.

Import

import { ActionGroup } from '@proyecto-viviana/solid-spectrum';

Single selection

With selectionMode 'single' the group behaves like a segmented toggle — exactly one item is pressed at a time.

<ActionGroup
  aria-label="Text alignment"
  selectionMode="single"
  defaultSelectedKeys={["left"]}
  items={[
    { id: "left", label: "Left" },
    { id: "center", label: "Center" },
    { id: "right", label: "Right" },
  ]}
/>

Multiple selection

selectionMode 'multiple' lets any number of items be toggled on together.

<ActionGroup
  aria-label="Card decorations"
  selectionMode="multiple"
  defaultSelectedKeys={["center"]}
  items={items}
/>

Vertical and disabled

orientation stacks the items; isDisabled disables the whole group.

Disabled

<ActionGroup orientation="vertical" items={items} />
<ActionGroup isDisabled items={items} />

Props

Prop	Type	Default	Description
`items`	Iterable<ActionGroupItem>	—	The action items, each with an id and label
`selectionMode`	'none' \| 'single' \| 'multiple'	`'none'`	Whether items can be toggled, and how many at once
`defaultSelectedKeys`	Iterable<Key>	—	Initially selected item keys (uncontrolled)
`selectedKeys`	Iterable<Key>	—	Selected item keys (controlled)
`onSelectionChange`	(keys: Selection) => void	—	Handler called when the selection changes
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	Layout direction of the items
`isDisabled`	boolean	`false`	Whether the entire group is disabled
`children`	(item, renderProps) => JSX.Element	—	Optional render function for each item; defaults to item.label

Accessibility

Renders with a toolbar role, or a radio/checkbox group when a selectionMode is set
Requires an aria-label or aria-labelledby to name the group
Arrow keys move focus between items using a roving tabindex
Enter or Space toggles selection when a selectionMode is active
Selected items expose aria-pressed or aria-checked
Disabled items are skipped by keyboard navigation