Components
InputGroup
Composes an input with leading and trailing addons.
InputGroup composes an input with leading and trailing addons, such as icons, text, or buttons.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/input-group.jsonUsage
"use client";
import { Input } from "@/components/ui/input";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group";
export default function Example() {
return (
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<InputGroupInput placeholder="0.00" />
</InputGroup>
);
}Examples
With text addon
With button addon
With both sides
Aligned addon
USD
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
InputGroupdata-slot="input-group" | <div>HTML | — |
InputGroupAddondata-slot="input-group-addon" | <div>HTML |
|
InputGroupButton | ButtonFaber UI |
|
InputGroupText | <span>HTML | — |
InputGroupInputdata-slot="input-group-control" | InputFaber UI | — |
InputGroupTextareadata-slot="input-group-control" | TextareaFaber UI | — |
Last updated on