Inputs

PinInput

One-time code and PIN entry. Paste, backspace and arrow keys work across cells, and SMS codes autofill.

<script>
  import { PinInput } from "@codeatlasdev/ui";
  let code = $state("");
</script>

<PinInput label="Verification code" bind:value={code} oncomplete={(v) => verify(v)} />

One hidden input backs all cells, with autocomplete="one-time-code", so mobile keyboards offer the SMS code. In numeric mode the numeric keypad opens and non-digits are rejected. The error is announced with role="alert".

Default

Six digits by default. oncomplete fires once all cells are filled. A four-digit masked PIN is shown below it.

Verification code

value: – · completed: –

Code

<script lang="ts">
  import { PinInput } from '@codeatlasdev/ui';

  let code = $state('');
  let done = $state('');
  let pin = $state('');
</script>

<div class="col">
  <div>
    <PinInput label="Verification code" bind:value={code} oncomplete={(v) => (done = v)} />
    <p class="out">value: {code || '–'} · completed: {done || '–'}</p>
  </div>
  <PinInput label="PIN" length={4} mask bind:value={pin} />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-5);
  }

  .out {
    margin: var(--ca-space-3) 0 0;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

States

Description, error, disabled and a free-text code.

Code

Check your email.

Code

Invalid or expired code.

Code

Access key

Code

<script lang="ts">
  import { PinInput } from '@codeatlasdev/ui';

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

<div class="col">
  <PinInput label="Code" description="Check your email." bind:value={hinted} />
  <PinInput label="Code" error="Invalid or expired code." value="123456" />
  <PinInput label="Code" disabled value="12" />
  <PinInput label="Access key" type="text" length={5} value="" />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-5);
  }
</style>

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Number of cells.
`value`	`string`	`''`	Bindable value.
`type`	`'numeric' \| 'text'`	`'numeric'`	Numeric restricts input to digits and opens the numeric keypad.
`label`	`string`	–	Visible label.
`description`	`string`	–	Hint below the cells.
`error`	`string`	–	Error message (role="alert"). Sets aria-invalid.
`mask`	`boolean`	`false`	Shows a bullet instead of each character.
`disabled`	`boolean`	`false`	Disables input.
`class`	`string`	–	Extra classes on the root.
`oncomplete`	`(value: string) => void`	–	Called once all cells are filled.