The PinInput component is used to capture sequences of numeric codes, such as PINs or verification codes, in a structured and user-friendly way.

• Sequential input: Supports multiple inputs for each digit of the code.
• Auto-focus support: Focuses the next input as users type.
• Loading state: Can indicate processing or verification status.
• Accessible design: Works with keyboard and screen readers.
• Form-ready: Can be used inside modals or verification flows.

Usage Example

Preview

open

Code

<script lang="ts">
  import { Button, Modal, PinInput } from "@fefade-ui/svelte"
  import { onMount } from "svelte"

  let isOpen = $state(false)
  let isLoading = $state(false)

  function handleOpen() {
    isOpen = !isOpen
  }

  function handleClose() {
    isOpen = false
  }

  onMount(() => {
    isOpen = true
  })
</script>

<Modal {isOpen} {handleClose}>
  <Modal.Header align="center">
    <h3>Two-Factor Verification</h3>
  </Modal.Header>
  <Modal.Content
    style="
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        "
  >
    <p>
      Enter the two-factor authentication code provided by the authenticator app
    </p>
    <br />
    <div
      style="
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-wrap: nowrap;
            gap: 0.5rem;
            "
    >
      {#each Array.from(Array(4)) as _, i (i)}
        <PinInput autoFocus={i === 0} {isLoading} value="" />
      {/each}
    </div>
  </Modal.Content>
  <Modal.Actions class="border-0" align="center">
    <Button
      class="hover-border-on-error hover-text-on-error"
      variant="outlined"
      onclick={handleClose}
    >
      Cancel
    </Button>
    <Button
      {isLoading}
      disabled={isLoading}
      onclick={() => {
        isLoading = true
        setTimeout(() => {
          isLoading = false
          handleClose()
        }, 5000)
      }}
    >
      Save
    </Button>
  </Modal.Actions>
</Modal>

<Button onclick={handleOpen}>open</Button>

Props

Prop	Type	Default	Description
value	string	""	Current value of the input.
autoFocus	boolean	false	Automatically focus this input when rendered.
isLoading	boolean	false	Displays a loading state to indicate processing.
disabled	boolean	false	Disables user interaction.
class	string	—	Optional additional CSS classes.
style	string	—	Inline style overrides.

Best Practices

• Use autoFocus on the first input to guide users naturally through the PIN.
• Keep the sequence length consistent for better UX.
• Combine with isLoading or feedback mechanisms to indicate verification status.
• Avoid placing critical actions elsewhere while PIN input is active.
• Use clear spacing and alignment for readability of digits.