Input
Recessed text inputs with leading and trailing add-ons.
Inputs collect short text. Cuelark inputs sit in a slightly recessed well that contrasts with raised buttons, take leading and trailing add-ons (icons, prefixes, units, keyboard hints) without extra wrappers, and show a soft focus halo and a clear invalid state.
Preview
We only use it for receipts and security alerts.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/input.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/input.
Builds on: motion
Usage
import { Input } from "@/components/ui/input";
<Input placeholder="Search" leading={<SearchIcon />} trailing={<kbd className="cue-kbd">/</kbd>} />Examples
Add-ons and states
Icons, a URL prefix, a keyboard hint, invalid and disabled.
Motion
When aria-invalid turns on, the field gives a short, damped shake, so errors are noticed without a modal.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Input
Extends native <input> props (except the numeric size attribute).
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Height follows --cl-density. |
| leading | ReactNode | — | Content before the text; wraps the input in a field group. |
| trailing | ReactNode | — | Content after the text. |
| aria-invalid | boolean | — | Shows the destructive border and halo. |
InputAddon
The add-on wrapper, exported for custom compositions.
Accessibility
- Always pair it with a <label> or aria-label; placeholders are not labels.
- Set aria-invalid and link the error text with aria-describedby.
- Add-ons are outside the input, so screen readers read only the value.
FAQ
Also searched as: react input · shadcn input · input with icon · input group · tailwind text field