PIN Input

Allows users to input a sequence of one-character alphanumeric inputs.

	<script lang="ts">
  import { PinInput, Toggle } from "bits-ui";
  import { Eye, EyeSlash } from "$icons/index.js";
 
  let value: string[] | undefined = [];
 
  let unlocked = true;
  let pinInputType: "text" | "password" = "password";
  $: pinInputType = unlocked ? "text" : "password";
</script>
 
<PinInput.Root
  bind:value
  class="flex items-center gap-2"
  type={pinInputType}
  placeholder="0"
>
  <PinInput.Input
    class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
  />
  <PinInput.Input
    class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
  />
  <PinInput.Input
    class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
  />
  <PinInput.Input
    class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
  />
  <PinInput.HiddenInput />
  <Toggle.Root
    aria-label="toggle code visibility"
    class="inline-flex size-10 items-center justify-center rounded-[9px] text-foreground/40 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 active:data-[state=on]:bg-dark-10"
    bind:pressed={unlocked}
  >
    {#if unlocked}
      <Eye class="size-5" />
    {:else}
      <EyeSlash class="size-5" />
    {/if}
  </Toggle.Root>
</PinInput.Root>

Structure

	<script lang="ts">
  import { PinInput } from "bits-ui";
</script>
 
<PinInput.Root>
  <PinInput.Input />
  <PinInput.Input />
  <PinInput.Input />
  <PinInput.Input />
  <PinInput.HiddenInput />
</PinInput.Root>

API Reference

PINInput.Root

The root component which contains the pin-input.

Property	Type	Description
`placeholder`	`string`	The placeholder character to use for empty pin-inputs. `Default: ○`
`value`	`string[]`	The value of the pin-input. `Default: —— undefined`
`name`	`string`	The name of the pin-input. This is used for form submission. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the pin-input is disabled. `Default: false`
`type`	`'text' \| 'password'`	The type of the input. Use `password` to mask the input. `Default: text`
`onValueChange`	`function`	A callback function called when the pin-input value changes. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`ids`	`object`	The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any).

Data Attribute	Value	Description
`data-pin-input-root`	`——`	Present on the root element.
`data-complete`	`——`	Present if the pin-input is complete.

PINInput.Input

The input component which contains the pin-input.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLInputElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Data Attribute	Value	Description
`data-pin-input-input`	`——`	Present on the input element.
`data-complete`	`——`	Present if the pin-input is complete.

PINInput.HiddenInput

The hidden input component which contains the pin-input.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLInputElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Data Attribute	Value	Description
`data-pin-input-hidden-input`	`——`	Present on the hidden input element.