Group

Overview

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.

Anatomy

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

Usage guidance

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

Accessibility

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

Installation

npx love-ui@latest add group

Usage

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>

Examples

The example shows an input attached to an action.

With Input