Atoms

Input Group

Grouped input with addons, buttons, and text.

FormanceCustom component built for Formance products.

Installation#

npx shadcn@latest add @formance/input-group

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

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

<InputGroup>
  <InputGroupAddon align="inline-start">
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search transactions..." />
</InputGroup>

Compound Components

Compose the pieces you need:

<InputGroup />Root container that groups an input with addons.

<InputGroupInput />The text input control (borderless, inherits group focus).

<InputGroupTextarea />A textarea control variant.

<InputGroupAddon />Slot for icons, badges, or buttons (inline-start, inline-end, block-start, block-end).

<InputGroupButton />A small button inside the addon area.

<InputGroupText />Static text or icon label inside an addon.

Command Menu