# Group (/docs/components/group)



<ComponentPreview name="group-demo" />

## Overview [#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 [#anatomy]

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

## Usage guidance [#usage-guidance]

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

## Accessibility [#accessibility]

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

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add group
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="group" title="components/ui/group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

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

## Examples [#examples]

The example shows an input attached to an action.

### With Input [#with-input]

<ComponentPreview name="group-with-input" />