Masked Input
An Input with live Maskito formatting. Works inside a react-aria TextField.
Overview
- `mask`: a preset name (
"cpf","cnpj","cpf-cnpj","cep","phone","credit-card","date","time","date-time","date-range","decimal"), a parameterized preset such as{ type: "decimal", prefix: "R$ " }or{ type: "date", mode: "mm/yy" }for a card expiry (safe to write inline), or custom Maskito options. - Presets: set
inputMode,autoCompleteand a placeholder. - Value:
onValueChangereceives the raw value (digits, ISO date, dot-decimal) and the masked text.valuemay be either, so a form can store only the raw value.
For other inputs, such as InputGroupInput, spread useMask(...).inputProps instead.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/masked-input.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- None
- Registry
- @fma-ds/input@fma-ds/use-mask