Inputs / Input Group

Input Group

<InputGroup />Stable

Input + leading/trailing addons (icons, buttons, text). The addons live inside the same bordered surface as the input, sharing the same focus ring.

import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

1import { InputGroup } from "@/components/upnext";
2
3<InputGroup />

Variants

1import { SearchInput } from "@/components/upnext";
2
3// The clearable-search pattern is sealed into <SearchInput /> — see the
4// SearchInput doc page for the full API. Don't hand-compose this with
5// raw InputGroup + Search + X; that's the pattern this component exists
6// to remove.
7
8<SearchInput
9  className="w-72"
10  placeholder="Search recruits"
11  aria-label="Search recruits"
12/>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.