Input Group

A composed input field with prefix/suffix icons, left/right text addons, and inline action buttons. Fully styled and size-consistent with the Input component.

Basic

A composed input with prefix/suffix icon slots and left/right text addons. Maintains consistent height with Input, Select, and Button.

https://

USD

{/* Search with prefix icon */}
<InputGroup
prefix={<Search className="size-4" />}
inputProps={{ placeholder: "Search projects..." }}
/>

{/* URL with left addon */}

<InputGroup
addonLeft="https://"
inputProps={{ placeholder: "your-domain.com" }}
/>

{/* Currency with icon + right addon */}

<InputGroup
prefix={<DollarSign className="size-4" />}
addonRight="USD"
inputProps={{ placeholder: "0.00", type: "number" }}
/>

{/* Search with prefix icon */}<InputGroupprefix={<Search className="size-4" />}inputProps={{ placeholder: "Search projects..." }}/>{/* URL with left addon */}<InputGroupaddonLeft="https://"inputProps={{ placeholder: "your-domain.com" }}/>{/* Currency with icon + right addon */}<InputGroupprefix={<DollarSign className="size-4" />}addonRight="USD"inputProps={{ placeholder: "0.00", type: "number" }}/>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add input-group

pnpm dlx @work-rjkashyap/unified-ui add input-group

npx @work-rjkashyap/unified-ui add input-group

bunx @work-rjkashyap/unified-ui add input-group

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { InputGroup, Button } from "@work-rjkashyap/unified-ui";

Basic Usage

InputGroup wraps a standard <input> with optional leading/trailing content. Pass native input attributes via inputProps.

<InputGroup
	prefix={<Search className="size-4" />}
	inputProps={{ placeholder: "Search...", type: "search" }}
/>

Prefix & Suffix Icons

Use prefix and suffix for inline icon slots. These sit inside the input border without a divider.

import { Mail, Lock, Eye, AtSign } from "lucide-react";

{/* Prefix only */}

<InputGroup
prefix={<Mail className="size-4" />}
inputProps={{ placeholder: "you@example.com", type: "email" }}
/>

{/* Prefix + Suffix */}

<InputGroup
prefix={<Lock className="size-4" />}
suffix={<Eye className="size-4" />}
inputProps={{ placeholder: "Password", type: "password" }}
/>

{/* At-sign prefix */}

<InputGroup
prefix={<AtSign className="size-4" />}
inputProps={{ placeholder: "username" }}
/>

import { Mail, Lock, Eye, AtSign } from "lucide-react";{/* Prefix only */}<InputGroupprefix={<Mail className="size-4" />}inputProps={{ placeholder: "you@example.com", type: "email" }}/>{/* Prefix + Suffix */}<InputGroupprefix={<Lock className="size-4" />}suffix={<Eye className="size-4" />}inputProps={{ placeholder: "Password", type: "password" }}/>{/* At-sign prefix */}<InputGroupprefix={<AtSign className="size-4" />}inputProps={{ placeholder: "username" }}/>

Left & Right Addons

Addons render outside the text field with a distinct background and a dividing border. Use them for units, labels, or fixed text like http://.

https://

USD

From

{/* URL prefix */}
<InputGroup
addonLeft="https://"
inputProps={{ placeholder: "your-domain.com" }}
/>

{/* Currency suffix */}

<InputGroup inputProps={{ placeholder: "0.00" }} addonRight="USD" />

{/* Phone prefix */}

<InputGroup
addonLeft="+1"
inputProps={{ placeholder: "Phone number", type: "tel" }}
/>

{/* Both sides */}

<InputGroup
addonLeft="From"
inputProps={{ placeholder: "start date" }}
addonRight="To"
/>

{/* URL prefix */}<InputGroupaddonLeft="https://"inputProps={{ placeholder: "your-domain.com" }}/>{/* Currency suffix */}<InputGroup inputProps={{ placeholder: "0.00" }} addonRight="USD" />{/* Phone prefix */}<InputGroupaddonLeft="+1"inputProps={{ placeholder: "Phone number", type: "tel" }}/>{/* Both sides */}<InputGroupaddonLeft="From"inputProps={{ placeholder: "start date" }}addonRight="To"/>

Combined: Icon + Addon

Mix icon prefixes/suffixes with addons for rich composed inputs.

.com

per month

USD

import { Globe, DollarSign } from "lucide-react";

<InputGroup
prefix={<Globe className="size-4" />}
addonRight=".com"
inputProps={{ placeholder: "your-site" }}
/>

<InputGroup
addonLeft="$"
inputProps={{ placeholder: "0.00", type: "number" }}
addonRight="per month"
/>

<InputGroup
prefix={<DollarSign className="size-4" />}
inputProps={{ placeholder: "Amount" }}
addonRight="USD"
/>

import { Globe, DollarSign } from "lucide-react";<InputGroupprefix={<Globe className="size-4" />}addonRight=".com"inputProps={{ placeholder: "your-site" }}/><InputGroupaddonLeft="$"inputProps={{ placeholder: "0.00", type: "number" }}addonRight="per month"/><InputGroupprefix={<DollarSign className="size-4" />}inputProps={{ placeholder: "Amount" }}addonRight="USD"/>

Sizes

<InputGroup size="sm" prefix={<Search />} inputProps={{ placeholder: "Small" }} />
<InputGroup size="md" prefix={<Search />} inputProps={{ placeholder: "Medium" }} />
<InputGroup size="lg" prefix={<Search />} inputProps={{ placeholder: "Large" }} />

<InputGroup size="sm" prefix={<Search />} inputProps={{ placeholder: "Small" }} /><InputGroup size="md" prefix={<Search />} inputProps={{ placeholder: "Medium" }} /><InputGroup size="lg" prefix={<Search />} inputProps={{ placeholder: "Large" }} />

Size	Height	Use Case
`sm`	32px	Compact toolbars, dense tables
`md`	36px	Default — most form contexts
`lg`	40px	Prominent inputs, hero forms

Variants

<InputGroup variant="default" prefix={<Mail />} inputProps={{ placeholder: "Default" }} />
<InputGroup variant="filled" prefix={<Mail />} inputProps={{ placeholder: "Filled" }} />

<InputGroup variant="default" prefix={<Mail />} inputProps={{ placeholder: "Default" }} /><InputGroup variant="filled" prefix={<Mail />} inputProps={{ placeholder: "Filled" }} />

Error State

https://

<InputGroup
error
prefix={<Mail className="size-4" />}
inputProps={{ placeholder: "Invalid email" }}
/>

<InputGroup
error
addonLeft="https://"
inputProps={{ placeholder: "invalid-url" }}
/>

<InputGrouperrorprefix={<Mail className="size-4" />}inputProps={{ placeholder: "Invalid email" }}/><InputGrouperroraddonLeft="https://"inputProps={{ placeholder: "invalid-url" }}/>

Disabled

<InputGroup
	disabled
	prefix={<Lock className="size-4" />}
	inputProps={{
		placeholder: "Disabled field",
		defaultValue: "read-only value",
	}}
/>

Inline Action Button

Pass a Button (or any element) as children to replace the default <input> slot with a fully custom layout. This is useful for search bars with an attached submit button.

<InputGroup addonLeft="Search">
	<input
		className="flex-1 h-full bg-transparent outline-none text-sm px-3 text-foreground placeholder:text-muted-foreground"
		placeholder="Type to search..."
	/>
	<Button variant="primary" size="sm" className="m-1 shrink-0">
		Go
	</Button>
</InputGroup>

Custom Children Slot

When children is provided, it replaces the built-in <input>. Use this to compose any input-like element (e.g., a Select, Combobox, or custom control) inside the group's styled container.

<InputGroup addonLeft="Country" addonRight={<Globe className="size-4" />}>
	<select className="flex-1 h-full bg-transparent outline-none text-sm px-3 text-foreground">
		<option>United States</option>
		<option>United Kingdom</option>
		<option>Germany</option>
	</select>
</InputGroup>

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height variant — aligns with Button and Input sizes.
`variant`	`"default" \| "filled"`	`"default"`	Visual style — bordered or muted-filled background.
`prefix`	`ReactNode`	—	Icon or content rendered inside the input on the left (no border).
`suffix`	`ReactNode`	—	Icon or content rendered inside the input on the right (no border).
`addonLeft`	`ReactNode`	—	Text or element attached to the left with a distinct background.
`addonRight`	`ReactNode`	—	Text or element attached to the right with a distinct background.
`disabled`	`boolean`	`false`	Disables pointer events and reduces opacity for the whole group.
`error`	`boolean`	`false`	Applies danger-colored border and focus ring.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`	—	Props spread onto the internal `<input>` element.
`inputClassName`	`string`	—	Additional CSS classes applied only to the inner `<input>`.
`children`	`ReactNode`	—	Replaces the default `<input>` with a custom element.
`className`	`string`	—	Additional CSS classes on the container element.

Accessibility

The internal <input> is a native HTML element — all standard accessibility features apply.
Use inputProps={{ "aria-label": "..." }} when no visible <label> accompanies the group.
Addon text (addonLeft, addonRight) is decorative — it is not programmatically associated with the input. Use aria-label or a visible label to describe the full field.
The disabled prop applies pointer-events-none and opacity-50 on the whole group via the CSS has-[:disabled] selector — no JS required.
Focus ring appears on focus-within using the standard --ring token.

Design Tokens

Token	Usage
`--input`	Container border (default variant)
`--muted`	Addon background + filled variant
`--border`	Addon divider border
`--ring`	Focus ring
`--danger`	Error state border and ring
`--radius-md`	Container border radius
`--duration-fast`	Transition speed

On this page