PIN Input

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

	<script lang="ts">
  import { PinInput } from "$lib";
  import { Toggle } from "$lib";
  import { LockKey, LockKeyOpen } from "phosphor-svelte";
 
  let value: string[] | undefined = ["5", "1", "3", "7"];
 
  let unlocked = false;
  let pinInputType: "text" | "password" = "password";
  $: pinInputType = unlocked ? "text" : "password";
</script>
 
<PinInput.Root
  bind:value
  class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
  type={pinInputType}
>
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.HiddenInput />
  <Toggle.Root
    aria-label="toggle code visibility"
    class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10"
    bind:pressed={unlocked}
  >
    {#if unlocked}
      <LockKey class="sq-6" />
    {:else}
      <LockKeyOpen class="sq-6" />
    {/if}
  </Toggle.Root>
</PinInput.Root>

	<script lang="ts">
  import { PinInput } from "$lib";
  import { Toggle } from "$lib";
  import { LockKey, LockKeyOpen } from "phosphor-svelte";
 
  let value: string[] | undefined = ["5", "1", "3", "7"];
 
  let unlocked = false;
  let pinInputType: "text" | "password" = "password";
  $: pinInputType = unlocked ? "text" : "password";
</script>
 
<PinInput.Root
  bind:value
  class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
  type={pinInputType}
>
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.Input
    class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground"
  />
  <PinInput.HiddenInput />
  <Toggle.Root
    aria-label="toggle code visibility"
    class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10"
    bind:pressed={unlocked}
  >
    {#if unlocked}
      <LockKey class="sq-6" />
    {:else}
      <LockKeyOpen class="sq-6" />
    {/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>

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

Component API

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.