Masked Input

Ввод по маске: карты с Luhn, срок действия, CVC, дата, время. Pro · Формы и ввод › Числа, коды и маски

Установка

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';

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.