Group

Use Group to visually connect controls that work together.

Group is useful for segmented inputs, attached buttons, search boxes with actions, and compact control sets.

A group wraps multiple controls and adjusts their borders or radius so they read as one unit.

Use Group when controls are part of the same action. Do not group unrelated buttons just to save space.

Grouped controls still need their own labels or accessible names. Keyboard order should follow the visual order.

npx honestui@latest add group

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

<Group>
  <GroupItem render={<Button />}>Button</GroupItem>
  <GroupSeparator />
  <GroupItem render={<Button />}>Button</GroupItem>
</Group>

The example shows an input attached to an action.

With Input