ComponentServer-safe
Input Group
Combines a field with icons, labels and inline actions in one focus surface.
Installation
Preview
Work
rivelle.dev/
Usage
tsx
import { Mail } from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
<InputGroup>
<InputGroupAddon><Mail /></InputGroupAddon>
<InputGroupInput placeholder="you@example.com" />
</InputGroup>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Places an addon around the input control. |
className | string | — | Overrides or extends the generated Tailwind classes. |
disabled | boolean | false | Prevents user interaction when supported. |