Group

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-group

Usage

import { Button } from '@/components/ui/button'
import { Group, GroupSeparator } from '@/components/ui/group'

<Group>
  <Button>Button</Button>
  <GroupSeparator />
  <Button>Button</Button>
</Group>

Features

Disabled State

Group container with disabled child items.

Accessibility

• The Group component has the role attribute set to group.
• Use Tab to navigate between the controls in the group.
• Use aria-label or aria-labelledby to label the group.

<Group aria-label="Media controls">
  <Button variant="outline">Play</Button>
  <GroupSeparator />
  <Button variant="outline">Pause</Button>
</Group>

Group vs ToggleGroup

• Use the Group component when you want to group controls that perform an action.
• Use the ToggleGroup component when you want to group controls that toggle a state.

API Reference

Group

The Group component is a container that visually groups a series of related controls together with consistent styling.

<Group>
  <Button>Button 1</Button>
  <GroupSeparator />
  <Button>Button 2</Button>
</Group>

Nest multiple groups to create complex layouts with spacing. See the nested groups example for more details.

<Group>
  <Group>
    <Button>1</Button>
    <GroupSeparator />
    <Button>2</Button>
  </Group>
  <Group>
    <Button>Previous</Button>
    <GroupSeparator />
    <Button>Next</Button>
  </Group>
</Group>

GroupSeparator

The GroupSeparator component visually divides controls within a group.

<Group>
  <Button>Button 1</Button>
  <GroupSeparator />
  <Button>Button 2</Button>
</Group>

Note: Unlike shadcn's ButtonGroup, GroupSeparator is required between all controls, including outline buttons. This ensures consistent visual hierarchy and focus states.

GroupText

Use this component to display text within a group, such as labels or prefixes.

<Group>
  <GroupText>https://</GroupText>
  <GroupSeparator />
  <Input placeholder="example.com" />
</Group>

Use the render prop to render a custom component as the text, for example a label.

<Group>
  <GroupText render={<Label htmlFor="domain" aria-label="Domain" />}>https://</GroupText>
  <GroupSeparator />
  <Input id="domain" placeholder="example.com" />
</Group>

Aliases

Group, GroupText, and GroupSeparator are also exported as ButtonGroup, ButtonGroupText, and ButtonGroupSeparator for compatibility.

Examples