# InputGroup

One bordered control that holds an input and its action.

- **Use it for**: An input with an attached action or affix, such as a search with a button or an amount with a currency.
- **Not for**: Separate controls that only happen to sit together. Try [Field](https://unseenui.com/components/field/).

## Installation

```bash
npm install @stackunseen/ui
```

## Parts

One border around an input and what goes with it. Wrap it in Field for the label.

```tsx
<Field label="Website">
  <InputGroup>
    <InputGroupAddon>https://</InputGroupAddon>
    <Input />
    <InputGroupButton type="submit">Check</InputGroupButton>
  </InputGroup>
</Field>
```

1. **`InputGroup`**: The shared border around the parts. Props: `attach`, `size`, `shape`, `invalid`, `disabled`.
2. **`InputGroupAddon`**: A prefix or suffix such as an icon, a currency sign or a domain.
3. **`Input`**: The field itself, a normal Input. Built from Input.
4. **`InputGroupButton`**: The action at the end, such as Subscribe. Props: `variant`, `size`, `asChild`, `href`.

## Usage

```tsx
import { InputGroup } from '@stackunseen/ui';
import { Field, Input } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Field label="Email address">
  <InputGroup shape="pill" size="touch">
    <Input type="email" />
    <InputGroupButton type="submit">Subscribe</InputGroupButton>
  </InputGroup>
</Field>
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `attach` | `"flush" \| "inset"` | Flush fills the end cap with the button; inset keeps an even gap around it. |
| `disabled` | `boolean` | Dims the whole group; the input and button keep their own disabled state. |
| `invalid` | `boolean` |  |
| `shape` | `"control" \| "pill"` | The control radius token, or the pill radius token. |
| `size` | `"default" \| "touch"` | Touch gives a 44px target. |

## Keyboard

Tab moves from the input to the button; Enter in the input submits the form.

## Works with

[Field](https://unseenui.com/components/field/), [Input](https://unseenui.com/components/input/), [Textarea](https://unseenui.com/components/textarea/), [Checkbox](https://unseenui.com/components/checkbox/), [Switch](https://unseenui.com/components/switch/), [RadioGroup](https://unseenui.com/components/radio-group/), [TonePad](https://unseenui.com/components/tone-pad/), [Slider](https://unseenui.com/components/slider/), [Combobox](https://unseenui.com/components/combobox/), [Calendar](https://unseenui.com/components/calendar/), [DateRangePicker](https://unseenui.com/components/date-range-picker/), [Select](https://unseenui.com/components/select/)

Page: https://unseenui.com/components/input-group/