Input group
Input's well, taken apart: an input with addons at either end, text, icons, keys or small buttons, in any number.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/input-groupExamples
A unit and a button, an icon and a key
cr
/
import { SearchIcon } from "@/components/zero/icons";import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText,} from "@/components/zero/input-group";import { Kbd } from "@/components/zero/kbd";export default function InputGroupReward() { return ( <div className="grid w-full max-w-sm gap-4"> <InputGroup> <InputGroupAddon> <InputGroupText>cr</InputGroupText> </InputGroupAddon> <InputGroupInput placeholder="Minimum reward" aria-label="Minimum reward" inputMode="numeric" /> <InputGroupAddon align="end"> <InputGroupButton>Max</InputGroupButton> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupAddon> <SearchIcon /> </InputGroupAddon> <InputGroupInput placeholder="Search jobs" aria-label="Search jobs" /> <InputGroupAddon align="end"> <Kbd>/</Kbd> </InputGroupAddon> </InputGroup> </div> );}Behaviour
The well behaves like Input's: the focus frame, the invalid outline, the disabled fill. An end that holds an addon takes the input's padding. For a single icon or action, Input's own start and end are shorter.
Props
InputGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Input's heights. |
| cut | "end" | "start" | "both" | "none" | "end" | Which edges are cut on the slant. |
InputGroupAddon
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "end" | "start" | Which end it sits at. |