Carregando…

OTP Input

Inputs

One-time password input with individual digit cells, 3 variants, mask and completion callback.

OTP Input — digit cells with paste and navigation

Outline (default)

Filled — large — masked

Underline — small

Instalação via CLI

$ npx kikitocn add otp-input

Interno:

@/lib/utils

Exemplo de uso

OTP InputExample.tsx

import { OTPInput } from "@/components/ui/cn/otp-input/OTPInput";

export function OTPInputExample() {
  return (
    <OTPInput />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`length`	`number`	`6`	Número de dígitos/células
`value`	`string`	`undefined`	Valor atual (controlled)
`defaultValue`	`string`	`''`	Valor inicial (uncontrolled)
`onChange`	`(value: string) => void`	`undefined`	Callback quando o valor muda
`onComplete`	`(value: string) => void`	`undefined`	Callback quando todas as células estão preenchidas
`variant`	`'outline' \| 'filled' \| 'underline'`	`'outline'`	Estilo visual das células
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho das células
`disabled`	`boolean`	`false`	Desabilita o input
`invalid`	`boolean`	`false`	Exibe estado de erro
`mask`	`boolean`	`false`	Mascara os dígitos (tipo senha)

Carregando…