fma-ds

Masked Input

An Input with live Maskito formatting. Works inside a react-aria TextField.

FormsoriginalMITChangelogRegistry JSON

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, autoComplete and a placeholder.
  • Value: onValueChange receives the raw value (digits, ISO date, dot-decimal) and the masked text. value may be either, so a form can store only the raw value.

For other inputs, such as InputGroupInput, spread useMask(...).inputProps instead.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/masked-input

    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