Masked input
Updated
MaskedInput formats to a pattern as you type: 9 takes a digit, a a letter and * either, and the literals between them are added for you. The caret stays beside what you typed, Backspace steps over the literals, and a digits-only mask brings up the numeric keypad. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
MM/YY
Not a Canadian postcode
import "@/components/dithercharts/controls.css"
import { MaskedInput } from "@/components/dithercharts/masked-input"
<MaskedInput
label="Phone"
name="phone"
mask="(999) 999-9999"
type="tel"
onValueChange={(formatted, digits) => setPhone(digits)}
/>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 masked-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. |
| maskrequired | Type string | Default – | The pattern: 9 takes a digit, a a letter and * either; anything else is typed for you, e.g. "(999) 999-9999", "9999 9999 9999 9999" or "99/99". |
| value | Type string | Default – | The value, for a controlled input; it's formatted to the mask. Pair it with onValueChange. |
| defaultValue | Type string | Default – | The value at first, for an uncontrolled input; it's formatted to the mask. |
| onValueChange | Type (value: string, raw: string) => void | Default – | Called with the formatted value and the raw characters the slots hold, e.g. "(555) 12" and "55512". |