Special components · Input

Input mask

Formatted text input powered by imask. Pass any iMask config — string templates, regex, numeric ranges, dates, credit cards.

Credit cardraw:

Phone (MX)raw:

Dateraw:

Amount

Usage

TSX

import { InputMask } from "kora-ui/client";

<InputMask
  mask="0000 0000 0000 0000"
  placeholder="Credit card"
  onAccept={(raw, masked) => console.log({ raw, masked })}
/>

<InputMask
  mask={{ mask: Number, scale: 2, radix: "." }}
  placeholder="Amount"
/>