Input Group

Input Group places an input or textarea inside one shared border with supporting text, icons, or buttons. It is useful when the surrounding content changes how people interpret or operate the value, such as a fixed URL prefix, a search icon, or a clear button.

The group is visual structure, not a replacement for a field. Give the control a visible label and use Field when you also need a description, validation message, required indicator, or shared disabled state.

InputGroup is the outer container. Add one InputGroupInput or InputGroupTextarea, then place InputGroupAddon before or after it. An addon can contain InputGroupText for non-interactive context or InputGroupButton for an action.

Inline addons sit at the start or end of a single-line input. Block addons sit above or below the control and let a textarea or input grow to its natural height.

Clicking a non-interactive addon focuses the input. Clicking a button preserves the button action. The border reflects focus, invalid, and disabled states from the control, so put aria-invalid and disabled on the input or textarea itself.

Prefix and suffix text is not submitted with the input value. If the server needs the complete value, combine the visible context with the submitted value in your application logic.

Keep a visible label outside the group. Decorative icons need aria-hidden="true"; icon-only buttons need an aria-label that names the action. Do not put required instructions or error messages only inside an addon, because addons are not automatically associated descriptions.

Use native input types and attributes where possible. Keep the control usable at 200% zoom, and avoid adding so many inline actions that the text entry area becomes too narrow.

npx honestui@latest add input-group

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

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput aria-label="Website address" name="website" />
</InputGroup>

These examples focus on the relationships that are unique to Input Group: an action beside a control, contextual text that is not part of the value, and a block addon below a textarea.

Prefix and suffix

Textarea with a block addon

• InputGroup accepts native div props and renders the shared container.
• InputGroupAddon accepts native div props and align: inline-start, inline-end, block-start, or block-end.
• InputGroupButton accepts Button props and the sizes xs, sm, icon-xs, or icon-sm. Its default type is button.
• InputGroupText accepts native span props.
• InputGroupInput and InputGroupTextarea accept their matching native control props.