Input
A single-line text field with sm/default/lg sizes and error state.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { Input, InputGroup, InputGroupAddon } from "@wunderui/react"Examples
Small
36 px — for dense toolbars and tables.
Default
44 px — the standard field.
Large
52 px — for prominent forms.
With label and error
Label, optional hint and a message when the value is not accepted.
Username already taken.
Currency · disabled
A field with a currency addon that cannot be edited.
Currency · filled
The same field with a value.
Currency · focused
The indigo border and ring while typing.
Currency · hover
The border darkens under the pointer.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Set new password card
Two password fields with a show / hide toggle and an error when they don’t match.
Change password form
A settings section with current and new password side by side.
Password
Changing your password signs you out of other devices.
12+ characters
Sign-in card
Email and password with icons inside the fields.