# Input Group

Icons, text and actions inside the same ring as the input, so the group focuses and validates as one.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/input-group
```

## Usage

```tsx
import { InputGroup, InputGroupInput } from '@/components/fetaui/input-group'
import { SearchIcon } from '@fetaui/react/rounded/search'

export function Example() {
  return (
    <InputGroup start={<SearchIcon />}>
      <InputGroupInput placeholder="Search" />
    </InputGroup>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| start | ReactNode |  |
| end | ReactNode |  |
| blockStart | ReactNode |  |
| blockEnd | ReactNode |  |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- When an icon, unit or action belongs to the value itself.
- A block addon for a composer or a small code editor.

## When not to use

- When the actions matter as much as the input: use Button Group.

## Accessibility

- One input with decorations, not a fieldset.
- Icon Buttons inside have their own labels.

## Motion

- The whole group lifts on focus. Addons stay put.
- The composer grows 22 px a line in 160 ms, up to six lines, then scrolls.
- With reduced motion, height jumps.