PinInput

<script lang="ts">
  import { PinInput } from 'sv5ui';

  let value = $state('');
</script>

<PinInput bind:value />

<PinInput length={4} placeholder="-" />
<PinInput length={6} placeholder="○" />

<!-- Number only -->
<PinInput type="number" placeholder="0" />

<!-- Masked input (shows ● instead of characters) -->
<PinInput mask />

<!-- OTP mode (sets autocomplete="one-time-code") -->
<PinInput otp type="number" length={6} />

<PinInput variant="outline" />
<PinInput variant="soft" />
<PinInput variant="subtle" />
<PinInput variant="ghost" />

<PinInput size="xs" length={4} />
<PinInput size="sm" length={4} />
<PinInput size="md" length={4} />
<PinInput size="lg" length={4} />
<PinInput size="xl" length={4} />

<PinInput color="primary" highlight value="12345" />
<PinInput color="success" highlight value="12345" />
<PinInput color="error" highlight value="12345" />

<PinInput disabled value="123" />

<script lang="ts">
  import { PinInput } from 'sv5ui';

  let completed = $state('');

  function handleComplete(value: string) {
    completed = value;
  }
</script>

<PinInput onComplete={handleComplete} length={4} type="number" />
{#if completed}
  <p>Completed: {completed}</p>
{/if}

<script lang="ts">
  import { PinInput } from 'sv5ui';

  let value = $state('');
</script>

<PinInput bind:value />
<p>Value: {value || '(empty)'}</p>