Input Group

import { MailIcon } from "lucide-react"

import {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/input-group.json

Usage

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

Copy<InputGroup>
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Email" />
</InputGroup>

Examples

With Text

import {
  InputGroup,
  InputGroupAddon,

With Button

Use align="inline-end" to position the addon at the end.

import { SearchIcon } from "lucide-react"

import {

API Reference

InputGroup

Main wrapper component with automatic focus and error state handling.

InputGroupAddon

InputGroupInput

Styled input component for use within InputGroup.

InputGroupButton

Button component styled for InputGroup context.

InputGroupText

Text element for displaying static content.