Text input
Updated
Input is a native text input in a 2px ink frame, with its label above. Hover casts a dithered shadow; a hint reads under it, and an error turns the frame red. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
Receipts only, never marketing.
Use lowercase letters, numbers and dashes.
import "@/components/dithercharts/controls.css"
import { Input } from "@/components/dithercharts/input"
<Input label="Email" type="email" placeholder="you@example.com" hint="Receipts only, never marketing." />
<Input label="Slug" defaultValue="q3 revenue" error="Use lowercase letters, numbers and dashes." />
<Input label="Plan" defaultValue="Pro" disabled />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add input
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the field, and its accessible name. |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |