Input

Text input with prefix/suffix adornments, a clear button, password reveal and automatic Field wiring.

4 files · 265 locdeps: clsx, tailwind-merge

/

Website

https://.com

We’ll link it from your public profile.

PasswordForgot?

That address is already registered.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/input.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs input

import { Input } from "@/components/opus/ui/input";

<Input prefix={<SearchIcon />} placeholder="Search…" clearable />

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Height and text size.
prefix / suffix	ReactNode	—	Leading / trailing adornment (icon, unit, Kbd).
clearable	boolean	—	Show × when there is a value; fires a real input event so controlled state updates.
invalid	boolean	—	Error styling. Set automatically inside <Field error>.
wrapperClassName	string	—	Classes for the outer shell; `className` goes to the <input>.