Input Group

⌘K

Installation

pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/input-group.json

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

<InputGroup>
  <InputGroupAddon>
    <Icon />
  </InputGroupAddon>
  <InputGroupInput type="text" placeholder="Enter text…" />
</InputGroup>

Combine inputs with text labels or suffixes.

Room

EUR

Add buttons to create interactive input groups.

Pair input groups with dropdown menus for filtering and grouping.

Use textarea for multi-line input with larger rows for better usability.

Your review

Show loading indicators while processing input.

Please wait...

The root container for the input group.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Container for icons, text, or buttons that accompany the input.

Prop	Type	Default	Description
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`	Position of the addon
`className`	`string`	-	Additional CSS classes

The input element within the group.

Prop	Type	Default	Description
`type`	`string`	`"text"`	Input type
`placeholder`	`string`	-	Placeholder text
`className`	`string`	-	Additional CSS classes

Textarea element for multi-line input.

Prop	Type	Default	Description
`rows`	`number`	-	Number of visible text rows
`placeholder`	`string`	-	Placeholder text
`className`	`string`	-	Additional CSS classes

Text content within an addon.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Button element within an addon.

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "icon-xs" \| "icon-sm"`	`"xs"`	Button size
`variant`	`"default" \| "ghost" \| "outline"`	`"ghost"`	Button style variant
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Button type