Input Group

An input with text, icons, or buttons attached inside its border.

⌘K

https://

When to use

Use when: An input with attached content, such as a prefix, an icon, or an inline button.
Avoid when: The attached content is a separate action; place a Button next to the input.

Installation

bunx shelf add input-group

The source lands in src/components/ui/input-group.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as InputGroup from "@/components/ui/input-group";

<InputGroup.Root>
  <InputGroup.Addon><SearchIcon /></InputGroup.Addon>
  <InputGroup.Input aria-label="Search" placeholder="Search invoices" />
  <InputGroup.Addon>⌘K</InputGroup.Addon>
</InputGroup.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.