Command Palette

Search for a command to run...

Input Group

shadcn/ui

Group input elements with addons, icons, and text for enhanced form controls.

12 results

import {	InputGroup,	InputGroupAddon,	InputGroupInput,	InputGroupText,} from "@/registry/optics/input-group";import { Search } from "lucide-react";<InputGroup>	<InputGroupInput placeholder="Search..." />	<InputGroupAddon>		<Search />	</InputGroupAddon>	<InputGroupAddon align="inline-end">		<InputGroupText>12 results</InputGroupText>	</InputGroupAddon></InputGroup>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/input-group.json

Props

<InputGroup />
Name
Type
className
string
variant
string

<InputGroupAddon />
Name
Type
className
string
align
"inline-start" | "inline-end" | "block-start" | "block-end" (default: "inline-start")
<InputGroupButton />
Name
Type
className
string
type
"button" | "submit" | "reset" (default: "button")
variant
"default" | "outline" | "ghost" | "destructive" | "secondary" | "info" | "success" | "warning" | "muted" | "raised" | "link" (default: "ghost")
size
"xs" | "sm" | "icon-xs" | "icon-sm" (default: "xs")
<InputGroupText />
Name
Type
className
string
<InputGroupInput />
Name
Type
className
string
type
string (standard HTML input types)
variant
"raised" | "ghost" | "outline"
<InputGroupTextarea />
Name
Type
className
string
variant
"raised" | "ghost" | "outline"
InputInput OTP