Loading...
Loading...
> Add icons, buttons, and text addons to inputs. Supports inline and block layouts for flexible compositions.
1import {2 InputGroup,3 InputGroupAddon,4 InputGroupButton,5 InputGroupInput,6 InputGroupSeparator,7 InputGroupText,8 InputGroupTextarea,9} from "@/components/ui/input-group"
1<InputGroup>2 <InputGroupAddon>3 <Search className="size-4" />4 </InputGroupAddon>5 <InputGroupInput placeholder="Search..." />6</InputGroup>
1<InputGroup>2 <InputGroupInput type="email" placeholder="you@example.com" />3 <InputGroupAddon align="inline-end">4 <Mail className="size-4" />5 </InputGroupAddon>6</InputGroup>
1<InputGroup>2 <InputGroupAddon>3 <InputGroupText>4 <DollarSign className="size-4" />5 </InputGroupText>6 </InputGroupAddon>7 <InputGroupInput type="number" placeholder="0.00" />8</InputGroup>
1const [value, setValue] = useState("");23<InputGroup>4 <InputGroupInput5 value={value}6 onChange={(e) => setValue(e.target.value)}7 placeholder="Search..."8 />9 {value && (10 <InputGroupAddon align="inline-end">11 <InputGroupButton size="icon-xs" onClick={() => setValue("")}>12 <X className="size-4" />13 </InputGroupButton>14 </InputGroupAddon>15 )}16</InputGroup>
1const [showPassword, setShowPassword] = useState(false);23<InputGroup>4 <InputGroupAddon align="inline-start">5 <Lock className="size-4" />6 </InputGroupAddon>7 <InputGroupInput8 type={showPassword ? "text" : "password"}9 placeholder="Enter password"10 />11 <InputGroupAddon align="inline-end">12 <InputGroupButton13 size="icon-xs"14 onClick={() => setShowPassword(!showPassword)}15 >16 {showPassword ? <EyeOff /> : <Eye />}17 </InputGroupButton>18 </InputGroupAddon>19</InputGroup>
1<InputGroup>2 <InputGroupAddon>3 <Search className="size-4" />4 </InputGroupAddon>5 <InputGroupSeparator />6 <InputGroupInput placeholder="Search files..." />7 <InputGroupSeparator />8 <InputGroupAddon align="inline-end">9 <InputGroupButton size="xs" variant="ghost">10 Search11 </InputGroupButton>12 </InputGroupAddon>13</InputGroup>
1<InputGroup>2 <InputGroupAddon align="block-start">3 <InputGroupText>Email Address</InputGroupText>4 </InputGroupAddon>5 <InputGroupInput type="email" placeholder="you@example.com" />6</InputGroup>
1<InputGroup>2 <InputGroupInput type="text" placeholder="Username" />3 <InputGroupAddon align="block-end">4 <InputGroupText className="text-xs">5 This will be your public username6 </InputGroupText>7 </InputGroupAddon>8</InputGroup>
1<InputGroup>2 <InputGroupTextarea placeholder="Type your message..." rows={3} />3 <InputGroupAddon align="block-end">4 <InputGroupButton size="sm" variant="default">5 <Send className="size-3" />6 Send7 </InputGroupButton>8 </InputGroupAddon>9</InputGroup>
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Size variant for the input group. |
| align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Position of the addon relative to input. |
| variant | ButtonVariant | "ghost" | Button variant for InputGroupButton. |
| asChild | boolean | false | Render InputGroupText as child element. |
| orientation | "vertical" | "horizontal" | "vertical" | Separator orientation. |