Input group

A thin wrapper around kit Input. Addons sit absolutely over the field (left-3 / right-3). The control pads itself when an addon is present so text does not run under the icon. Pair it with Field.

Addons are pointer-events-none by default. Pass pointer-events-auto on the addon when the overlay is a button.

Trailing addons use align="inline-end".

Usage

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

<InputGroup>
  <InputGroupInput placeholder="Find a file" />
  <InputGroupAddon>
    <MagnifyingGlass className="size-4" />
  </InputGroupAddon>
</InputGroup>

Install

shadcn add @gesso/input-group