Haedong
041

Input Group

Form
>

Customize

Addon
State

Code

<InputGroup>
  <InputGroupAddon>&gt;</InputGroupAddon>
  <InputGroupInput placeholder="Search" />
</InputGroup>

Install

npx shadcn@latest add https://components.haedong.dev/r/input-group.json

Props

InputGroup extends the native div props and owns the box: focus inside turns the hairline full-strength, aria-invalid makes it dashed, a disabled input dims the whole group. InputGroupInput is the bare input (native input props); InputGroupAddon (div props) is a cell before or after it — text is muted uppercase, a ghost Button fills the height. aria-invalid and aria-describedby on the group are forwarded to the input, which is what Field injects.

PropTypeDescription
aria-invalidbooleanDashed full-strength hairline, forwarded to the input. Set by Field's error.
classNamestringWidth of the box (w-64, max-w-*).