Input Group
An input shell that owns focus and invalid styling for a wrapped control — leading/trailing slots plus the inner input, never a double focus ring.
Installation
- $npx litefy@latest add input-group
- $pnpm dlx litefy@latest add input-group
- $yarn dlx litefy@latest add input-group
- $bun --bun litefy@latest add input-group
Usage
InputGroup is the shell around a wrapped control: it owns all focus and invalid visuals and strips its children of their own focus indicators — no double focus ring. InputLeading / InputTrailing are the prefix/suffix slots.
"use client";
import { InputGroup, InputLeading, InputRoot, InputTrailing } from "@/ui";
export default function Demo() {
return (
<div className="flex flex-col gap-4">
<InputGroup>
<InputLeading>$</InputLeading>
<InputRoot type="text" placeholder="0.00" aria-label="Price in US dollars" />
<InputTrailing>USD</InputTrailing>
</InputGroup>
<InputGroup invalid>
<InputRoot
type="text"
defaultValue="not-an-email"
aria-label="Email address"
aria-invalid
/>
<InputTrailing>Invalid</InputTrailing>
</InputGroup>
<InputGroup>
<InputRoot type="text" placeholder="Disabled" aria-label="Disabled example" disabled />
</InputGroup>
</div>
);
}
Disabled styling is global — :disabled elements are dimmed by the base stylesheet, components carry no built-in disabled: utilities; Input, Password and NumberField are built on this shell.
API Reference
InputGroup
| Prop | Type | Default | Description |
|---|---|---|---|
invalid | boolean | - | Marks the shell invalid (data-invalid), switching border/focus to danger |
className | ClassNameValue | - | Custom classes, applied to the shell |
...props | React.ComponentProps<"div"> | - | Supports all native div props (except className) |
InputLeading / InputTrailing
Prefix/suffix slots. Support all native <span> attributes (except className), plus className.
InputRoot
The bare inner input. Supports all native <input> attributes (except className), plus className. Carries aria-invalid for accessibility only — invalid and focus visuals belong to the group.