Pin Input

"use client";

import { useState } from "react";
import { PinInput, Text, VStack } from "astralis-ui";

export function PinInputDemo() {
  const [done, setDone] = useState(false);

  return (
    <VStack gap="3">
      <PinInput length={4} onComplete={() => setDone(true)} onChange={() => setDone(false)} />
      <Text size="xs" color={done ? "success" : "muted"}>
        {done ? "Code complete — verifying…" : "Paste works too — try it."}
      </Text>
    </VStack>
  );
}

"use client";

import { PinInput, Text, VStack } from "astralis-ui";

export function PinInputMask() {
  return (
    <VStack gap="5" alignItems="start">
      <VStack gap="1" alignItems="start">
        <Text as="span" size="xs" color="muted">masked, 6 digits, filled</Text>
        <PinInput length={6} mask variant="filled" />
      </VStack>
      <VStack gap="1" alignItems="start">
        <Text as="span" size="xs" color="muted">alphanumeric, size lg</Text>
        <PinInput length={5} type="alphanumeric" size="lg" placeholder="•" />
      </VStack>
    </VStack>
  );
}