Input Group

Display additional information or actions to an input or textarea.

shadcn/ui docs
⌘K

Installation

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

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/components/ui/input-group'
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Examples

Default

⌘K

With Button

Without an explicit variant, InputGroupButton renders as a flat "ghost" button. Pass variant="default" for the accent look. Sizes are xs, sm, icon-xs and icon-sm.

Textarea

Markdown supported

Block Start

Use align="block-start" or align="block-end" to place the addon above or below the control.

First Name