Overrides
Input Group
Extended Features
- Size variants —
xs,sm,default, andlgonInputGroup, aligned with the Input override.InputGroupInputandInputGroupButtoninherit the group size when you omit their ownsizeprop.
Install
Configure your registry in components.json:
{
"registries": {
"@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
}
}Then run:
npx shadcn@latest add @uxio/input-groupUsage
Set size on InputGroup so the shell height matches the inner Input (and optional addons). Pass
size explicitly on InputGroupInput or InputGroupButton only when you need a size other than
the group's.
import { SearchIcon } from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
export function SearchField() {
return (
<InputGroup size="default">
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon className="size-4 text-muted-foreground" />
</InputGroupAddon>
<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>
)
}Examples
Size Variants
Use size on InputGroup so the group matches Input and
Button dimensions. Heights follow each theme’s input tokens.