Input Group

Installation

npx shadcn@latest add @uqudo/input-group

Installing it also installs Button, Input and Textarea, which it depends on.

Usage

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

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

InputGroup draws the border, background and focus ring; InputGroupInput and InputGroupTextarea are borderless versions of the regular controls that sit inside it. Clicking an addon focuses the input.

Examples

With button

InputGroupButton is a compact Button tuned to fit inside an addon.

With textarea

Use align="block-end" (or block-start) to place an addon below or above a textarea.

API Reference

InputGroup

InputGroupAddon

InputGroupButton

InputGroupInput

InputGroupTextarea

InputGroupText

Data attributes