Input components
9 free, copy-and-go React Input examples built on the SevenUI Input primitive. Install any of them with the shadcn CLI.
On this page
Search input
A labelled search input with a leading icon inside the field.
With error
A Field-wrapped input in an invalid state showing its error message.
Password with toggle
A password input with a ghost button that reveals or hides the value.
Sizes
Small, default and large inputs paired with buttons of matching height, each with the density it suits.
Outline, filled and underline
The same field in three visual styles: outlined, tinted fill and a single underline rule.
Read-only and disabled
A selectable read-only URL with a copy button next to a disabled email field managed by single sign-on.
Teammates with an invite can sign in here. Contact support to change it.
Managed by your company's single sign-on. Ask a workspace owner to change it.
Character limit
A controlled input with a remaining-characters counter and a meter that warns near the limit.
Shown next to your name in comments and mentions.
Floating label
A demo request form whose labels sit inside the fields and float up once focused or filled.
Newsletter signup
A marketing newsletter signup with inline email validation and a confirmation state.
The changelog, once a month
New components, breaking changes and migration notes. No launch hype, unsubscribe in one click.
Components are the parts. Blocks are the page.
Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.
One purchase, yours forever. $99 at launch instead of $249.