Number Pad

Inputs

PIN/passcode keypad with masked display, max-length, completion callback and backspace.

Instalação via CLI

$ npx kikitocn add number-pad

Interno:

@/lib/utils

Exemplo de uso

Number PadExample.tsx

import { NumberPad } from "@/components/ui/cn/number-pad/NumberPad";

export function NumberPadExample() {
  return (
    <NumberPad />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`string`	`undefined`	Valor atual (controlled)
`onChange`	`(value: string) => void`	`undefined`	Callback quando o valor muda
`maxLength`	`number`	`4`	Comprimento máximo do PIN
`showValue`	`boolean`	`true`	Exibe indicadores de dígito na parte superior
`masked`	`boolean`	`true`	Exibe pontos em vez de dígitos
`onComplete`	`(value: string) => void`	`undefined`	Callback quando maxLength é atingido
`onClear`	`() => void`	`undefined`	Callback quando o campo é esvaziado

Carregando…