fma-ui

Masked Input

An Input with live Maskito formatting. mask takes 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$ " } (safe to write inline), or custom Maskito options. Presets set inputMode, autoComplete and a placeholder. 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. Works inside a react-aria TextField. For other inputs, such as InputGroupInput, spread useMask(...).inputProps instead.

FormsoriginalRegistry JSON

Installation

  1. 1

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

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

    Add the item

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

    Files land in components/fma-ui/masked-input.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
None
Registry
@fma-ui/input@fma-ui/use-mask