Input · text fields
Text fields with everything around them — floating labels, icons and affixes, clear and reveal buttons, a password meter, number steppers, counters, a growing textarea and animated messages.
Basic · floating label · variants
As it appears on your ID.
Icons · prefix / suffix · clear · loading
Esc clears
https://
.com
€
↑ ↓ or − / + change it by 5
Password · strength · counter · textarea that grows
The counter warns near the limit41 / 60
0 / 280
States · sizes
Available
Enter a valid email address
Usage
import { signal } from "./index.js";import { Input, Textarea } from "./components/input.js"; const email = signal("");Input({ value: email, label: "Email", type: "email", placeholder: "[email protected]", hint: "We never share it" })Input({ label: "Email address", floating: true }) // the label floats upInput({ label: "Search", icon: searchSvg, clearable: true, loading: busy })Input({ label: "Website", prefix: "https://", suffix: ".com" })Input({ label: "Price", type: "number", prefix: "€", min: 0, step: 5 }) // − / + and ↑ ↓Input({ label: "Password", type: "password", strength: true }) // an eye, a meterInput({ label: "Post", maxLength: 280 }) // a counterTextarea({ label: "Bio", maxLength: 280, maxRows: 8 }) // grows with its text // error / success (text or a getter), size "sm" · "lg", variant "filled" · "underline"Input({ label: "Email", value: email, error: () => bad() && "Enter a valid email" })