Pin Input

Campos segmentados para OTP y códigos de verificación, con input oculto para formularios

Input PIN / OTP basado en Ark UI Pin Input. El componente de conveniencia renderiza length celdas, etiqueta e PinInputHiddenInput para envío nativo del formulario. Usa las partes compuestas para personalizar cada segmento.

Código de verificación

import { PinInput } from "@/components/ui/pin-input";

export default function Example() {
  return <PinInput label="Código de verificación" length={6} />;
}

View Code

Instalación

bash

liminal add pin-input

Uso

length define cuántos segmentos se muestran (por defecto 4). El resto de props se reenvían a PinInputRoot (por ejemplo otp, type, value, onValueChange).

Código corto

import { PinInput } from "@/components/ui/pin-input";

export default function Example() {
  return <PinInput label="Código corto" length={4} />;
}

View Code

Ejemplos

API compuesta

Exportaciones: PinInputRoot, PinInputLabel, PinInputControl, PinInputField, PinInputHiddenInput. Renderiza un PinInputField por índice si compones a mano.

tsx

import {
  PinInputRoot,
  PinInputLabel,
  PinInputControl,
  PinInputField,
  PinInputHiddenInput,
} from "@/components/ui/pin-input";

export default function Example() {
  return (
    <PinInputRoot count={4}>
      <PinInputLabel>Código</PinInputLabel>
      <PinInputControl>
        <PinInputField index={0} />
        <PinInputField index={1} />
        <PinInputField index={2} />
        <PinInputField index={3} />
      </PinInputControl>
      <PinInputHiddenInput />
    </PinInputRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Etiqueta opcional sobre el control.
length	number	4	Número de segmentos (equivale a `count` en la raíz de Ark).

También acepta las props de PinInput.Root de Ark. Ver Ark Pin Input.