Masked Input

Masked input: cards with Luhn check, expiry, CVC, date, time. Pro · Forms and input › Numbers, codes and masks

Text field that formats input against a mask as you type, keeps the caret next to the character you edited, accepts pasted values, and steps over separators on Backspace. With name, a form submits the text as shown ("4242 4242 …"); the raw value comes from onValueChange.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add masked-input

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MaskedInput } from 'valyro-ui-pro';

Props

Prop	Type	Default
`mask` *	`MaskPreset \| string \| MaskDefinition`		A preset (`card`, `expiry`, `cvc`, `date`, `time`), a pattern (`9` digit, `a` letter, `*` either, `\` escapes, anything else is a literal), or a full `MaskDefinition`.
`value`	`string`		Raw value: the typed characters without the literals.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string, details: MaskedInputDetails) => void`		Called with the new `value` when it changes.
`showCardBrand`	`boolean`	`true`	Show the detected card network at the end of card-number fields (default true).
`size`	`'sm' \| 'md' \| 'lg'`		Field height and text size.
`leftIcon`	`ReactNode`		Icon inside the field, before the text.
`rightIcon`	`ReactNode`		Icon inside the field, after the text and the clear/password buttons.
`prefix`	`ReactNode`		Attached text before the input, e.g. "https://".
`suffix`	`ReactNode`		Attached text after the input, e.g. ".vercel.app".
`invalid`	`boolean`		Error border and aria-invalid on the input (an explicit `aria-invalid` wins).
`clearable`	`boolean`		Shows a clear button while the input has a value.
`labels`	`Partial<TextInputLabels>`		Accessible names of the clear and show/hide password buttons.

Related components

Number Input — Numeric input
OTP Input — One-time code entry
Phone Input — Phone number with country picker, live formatting and an E.164 value
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges

Previous: Phone Input · Next: Date Picker · All Forms and input