# InputGroup

> An input with a fixed prefix, suffix, icon or button inside the same bordered box, such as a domain, a unit or a search icon.

Source: https://raft-design.botiverse.build/components/input-group. Generated from the current release; where it differs from what you remember, this page is right.

An input group puts fixed text, an icon or a button inside an input's box: a domain before a server's address, a unit after a budget, a search icon before a query. The box, its border and its states belong to the group, so the input and its addons read as one control.

## When to use

| Situation                                                            | Use                            |
| -------------------------------------------------------------------- | ------------------------------ |
| A value with a fixed prefix or suffix: `raft.build/`, `#`, USD / day | InputGroup                     |
| A search field                                                       | InputGroup with a search icon  |
| An input with an action inside it, such as clearing or copying       | InputGroup with a button addon |
| A plain value                                                        | [Input](https://raft-design.botiverse.build/components/input.md)     |
| A search across the server                                           | [Search](https://raft-design.botiverse.build/components/search.md)  |

## Anatomy

- `InputGroup`: the bordered box. Required.
- `InputGroupAddon`: an icon or a button at the start or end (`align`).
- `InputGroupAddon.Text`: fixed text at the start or end, in Space Mono and `foreground-hint`.
- `InputGroupInput`: the input itself, without a border of its own. Required.

## Variants

| Variant                     | Use for                                                                                                                      |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Addon `variant="default"`   | A light mark inside the field: a search icon, a keyboard hint, a clear button                                                |
| Addon `variant="container"` | Part of the value's structure: a protocol, a domain, a unit. It sits on `fill-muted`, separated from the input by a hairline |

## States

- Put `data-invalid` and `disabled` on `InputGroupInput`. The group draws them: a `danger-strong` border when invalid, the shared disabled look when disabled ([States](https://raft-design.botiverse.build/foundations/states.md)).
- The focus ring goes around the whole group ([States](https://raft-design.botiverse.build/foundations/states.md#focus)).

## Behavior

- In a search field, put an 18px search icon at the start, and a clear button at the end once there is text.
- A Button in an end addon is a control embedded in the field: 20px on a desktop and 32px on a phone, with `radius-chip` and a 16px icon. When it is the addon's last child it sits 6px from the field's end, as far as from its top and bottom; put a hint such as Esc before it, not after ([Shape](https://raft-design.botiverse.build/foundations/shape.md#inside-a-frame)).
- A text addon takes at most half the group and truncates past that, with its whole text as its `title`, so there is always room to type ([Forms](https://raft-design.botiverse.build/patterns/forms.md#long-values-in-fields)).

## Accessibility

`InputGroupInput` wraps Base UI Input; the group itself is a plain `<div>`.

- Name the input with a `FieldLabel` ([Field](https://raft-design.botiverse.build/components/field.md)), or with `aria-label` on a search field that has no visible label (Search).
- Give a button addon its own `aria-label` (Clear Search).
- Text addons are not read as part of the value. When the prefix matters for understanding the value, say it in the label or the help text.

## API

### InputGroup

Also takes the attributes of its element.

### InputGroupAddon

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"inline-end" \| "inline-start"` | `"inline-start"` |  |
| `variant` | `"default" \| "container"` | `"default"` |  |

Also takes the attributes of its element.

### InputGroupInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `suppressPasswordManager` | `boolean` |  | Add common password-manager ignore hints for non-credential fields where extension overlays would obscure custom UI. |
| `defaultValue` | `string \| number \| readonly string[]` |  | The default value of the input. Use when uncontrolled. |
| `onValueChange` | `(value: string, eventDetails: BaseInput.ChangeEventDetails) => void` |  | Callback fired when the `value` changes. Use when controlled. |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `value` | `string \| number \| readonly string[]` |  | The value of the input. Use when controlled. |

Also takes the attributes of its element.

## Changes

- 0.10.0 (Breaking Changes): Field frames (`Input`, `Textarea`, `InputGroup`, `Select`, `Combobox`, `ComboboxSelect`, `Composer`, option `Card`, `SearchTrigger`) are drawn at 1px in `line-field` instead of 1.5px, on the phone too.
- 0.5.35 (Changed): `InputGroup` addon and text colours are driven by variables on the group root. A caller-provided text-colour class on those parts replaces their colour in every state, focus and disabled included.