# Input Group

Group inputs with icons, text, buttons, and addons.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="input-group-demo">
  <InputGroupDemo />
</ComponentPreview>

## Installation [#installation]

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger value="cli">
      CLI
    </TabsTrigger>

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

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add https://shadcn-cssinjs.com/r/input-group.json
    ```
  </TabsContent>

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

      ```bash
      pnpm add @base-ui/react @stylexjs/stylex
      ```

      <Step>
        Make sure [StyleX is configured](/docs/installation) and the design tokens are
        installed.
      </Step>

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

      <ComponentSource name="input-group" title="input-group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</Tabs>

## Usage [#usage]

```tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group/input-group";
```

```tsx
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>
```

## Composition [#composition]

The `InputGroupAddon` component should be placed after the input. Use the
`align` prop to position the addon.

```text
InputGroup
├── InputGroupInput / InputGroupTextarea
└── InputGroupAddon
    ├── InputGroupText
    └── InputGroupButton
```

## Align [#align]

Use the `align` prop on `InputGroupAddon` to position content. For
`InputGroupInput`, use `inline-start` or `inline-end`. For
`InputGroupTextarea`, use `block-start` or `block-end`.

### inline-start [#inline-start]

<ComponentPreview name="input-group-inline-start">
  <InputGroupInlineStart />
</ComponentPreview>

### inline-end [#inline-end]

<ComponentPreview name="input-group-inline-end">
  <InputGroupInlineEnd />
</ComponentPreview>

### block-start [#block-start]

<ComponentPreview name="input-group-block-start">
  <InputGroupBlockStart />
</ComponentPreview>

### block-end [#block-end]

<ComponentPreview name="input-group-block-end">
  <InputGroupBlockEnd />
</ComponentPreview>

## Examples [#examples]

### Icon [#icon]

<ComponentPreview name="input-group-icon">
  <InputGroupIcon />
</ComponentPreview>

### Text [#text]

<ComponentPreview name="input-group-text">
  <InputGroupTextExample />
</ComponentPreview>

### Button [#button]

<ComponentPreview name="input-group-button">
  <InputGroupButtonExample />
</ComponentPreview>

### Kbd [#kbd]

<ComponentPreview name="input-group-kbd">
  <InputGroupKbd />
</ComponentPreview>

### Dropdown [#dropdown]

<ComponentPreview name="input-group-dropdown">
  <InputGroupDropdown />
</ComponentPreview>

### Spinner [#spinner]

<ComponentPreview name="input-group-spinner">
  <InputGroupSpinner />
</ComponentPreview>

### Textarea [#textarea]

<ComponentPreview name="input-group-textarea">
  <InputGroupTextareaExample />
</ComponentPreview>

### Custom Input [#custom-input]

<ComponentPreview name="input-group-custom">
  <InputGroupCustom />
</ComponentPreview>



## RTL [#rtl]

To enable right-to-left support, see the [RTL guide](/docs/rtl).

<ComponentPreview name="input-group-rtl" direction="rtl">
  <InputGroupRtl />
</ComponentPreview>

## API Reference [#api-reference]

### InputGroup [#inputgroup]

The main component that wraps inputs and addons.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### InputGroupAddon [#inputgroupaddon]

Displays icons, text, buttons, or other content alongside inputs. For proper
focus navigation, place it after the input and use the `align` prop to position
it.

| Prop        | Type                                                             | Default          |
| ----------- | ---------------------------------------------------------------- | ---------------- |
| `align`     | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` |
| `className` | `string`                                                         | -                |

### InputGroupButton [#inputgroupbutton]

Displays buttons within input groups.

| Prop        | Type                                                                          | Default   |
| ----------- | ----------------------------------------------------------------------------- | --------- |
| `size`      | `"xs" \| "icon-xs" \| "sm" \| "icon-sm"`                                      | `"xs"`    |
| `variant`   | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"ghost"` |
| `className` | `string`                                                                      | -         |

### InputGroupInput [#inputgroupinput]

Replacement for `<Input />` when building input groups. Uses the unified
`data-slot="input-group-control"` for focus state handling.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### InputGroupTextarea [#inputgrouptextarea]

Replacement for `<Textarea />` when building input groups. Uses the unified
`data-slot="input-group-control"` for focus state handling.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |