uix-uiInput
Text field with label & helper. 3 styles × 3 sizes × 7 states.
We print this on the parcel.
import { Input } from "@/components/ui/input";
export default function Example() {
return (
<div style={{ width: 320, maxWidth: "100%" }}>
<Input label="Your name" placeholder="Nusrat Jahan" helper="We print this on the parcel." />
</div>
);
}
Installation
$ npx uix-ui@latest add inputThis copies the file into components/ui/input.tsx in your project. npx shadcn@latest add @uix/input works too.
Usage
import { Input } from "@/components/ui/input";
<div style={{ width: 320, maxWidth: "100%" }}>
<Input label="Your name" placeholder="Nusrat Jahan" helper="We print this on the parcel." />
</div>
Examples
Appearances
import { Input } from "@/components/ui/input";
export default function Example() {
return (
<div style={{ width: 320, display: "grid", gap: 16 }}>
<Input appearance="outline" label="Outline" placeholder="Phone number" />
<Input appearance="filled" label="Filled" placeholder="Phone number" />
<Input appearance="underline" label="Underline" placeholder="Phone number" />
</div>
);
}
Sizes
import { Input } from "@/components/ui/input";
export default function Example() {
return (
<div style={{ width: 320, display: "grid", gap: 12 }}>
<Input size="sm" placeholder="Small" aria-label="Small" />
<Input size="md" placeholder="Medium" aria-label="Medium" />
<Input size="lg" placeholder="Large" aria-label="Large" />
</div>
);
}
Icon, prefix, error and disabled
Optional
Enter a 4 digit postcode.
import { Inbox } from "@/components/ui/icons";
import { Input } from "@/components/ui/input";
export default function Example() {
return (
<div style={{ width: 320, display: "grid", gap: 16 }}>
<Input label="Email" secondaryLabel="Optional" leadingIcon={<Inbox />} placeholder="israt@shapla.example" />
<Input label="Price per tin" prefix="৳" suffix="BDT" defaultValue="480" />
<Input label="Postcode" defaultValue="12" error="Enter a 4 digit postcode." />
<Input label="Coupon" disabled defaultValue="SHAPLA10" />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | outline | filled | underline | "outline" | |
size | sm | md | lg | "md" | |
label | React.ReactNode | – | |
secondaryLabel | React.ReactNode | – | Right-aligned note next to the label, for example "Optional". |
feedback | React.ReactNode | – | Message under the field. |
helper | React.ReactNode | – | Same as feedback. |
error | string | – | Error message; also marks the field invalid and replaces the feedback. |
leadingAvatar | React.ReactNode | – | Avatar at the start (for example <Avatar size="xs" initials="AB" />). |
leadingIcon | React.ReactNode | – | Icon at the start. |
leadingContent | React.ReactNode | – | Selector or text at the start, for example "Email ▾". |
leadingDivider | boolean | – | Hairline after the leading parts. |
prefix | React.ReactNode | – | Fixed text before the value, for example "https://". |
tags | React.ReactNode[] | – | Tag chips before the value. |
suffix | React.ReactNode | – | Fixed text after the value, for example ".com". |
trailingDivider | boolean | – | Hairline before the trailing parts. |
trailingContent | React.ReactNode | – | Action at the end, for example a "Copy" button. |
helpIcon | boolean | string | – | Help icon; a string becomes its accessible name and tooltip. |
trailingIcon | React.ReactNode | – | Icon at the end. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx