Pin Input

Used to capture a pin code or otp from the user

Enter Otp

import { PinInput } from '@fidely-ui/react/pin-input'

export const PinInputBasics = () => {
  return (
    <PinInput.Root>
      <PinInput.Label>Enter Otp</PinInput.Label>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

Usage

import { PinInput } from '@fidely-ui/react'

<PinInput.Root>
  <PinInput.HiddenInput />
  <PinInput.Control>
    <PinInput.Input />
  </PinInput.Control>
</PinInput.Root>

Examples

Sizes

Pass the size prop to the PinInput.Root component to change the size of the pin input component

import { PinInput, Stack } from '@fidely-ui/react'

export const PinInputSizes = () => {
  const sizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const

  return (
    <Stack gap={2}>
      {sizes.map((size) => (
        <PinInput.Root key={size} size={size}>
          <PinInput.HiddenInput />
          <PinInput.Control>
            <PinInput.Input index={0} />
            <PinInput.Input index={1} />
            <PinInput.Input index={2} />
            <PinInput.Input index={3} />
          </PinInput.Control>
        </PinInput.Root>
      ))}
    </Stack>
  )
}

OTP

Pass the otp prop to the PinInput.Root component to indicate that the input is for a one-time password (OTP).

import { PinInput } from '@fidely-ui/react'

export const PinInputOtp = () => {
  return (
    <PinInput.Root otp>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

Placeholder

Pass the placeholder prop to the PinInput.Root component to define placeholder text for each input field.

import { PinInput } from '@fidely-ui/react'

export const PinInputPlaceholder = () => {
  return (
    <PinInput.Root placeholder="🙂">
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

Mask

Pass the mask prop to the PinInput.Root component to mask the input value (e.g., for sensitive codes).

Label

import { PinInput } from '@fidely-ui/react'

export const PinInputMask = () => {
  return (
    <PinInput.Root mask>
      <PinInput.Label>Label</PinInput.Label>
      <PinInput.HiddenInput />
      <PinInput.Control>
        {[0, 1, 2, 3].map((id, index) => (
          <PinInput.Input key={id} index={index} />
        ))}
      </PinInput.Control>
    </PinInput.Root>
  )
}

Blur on complete

By default, the last input remains focused after the user fills all fields, and the onValueComplete callback is invoked.

To automatically blur the input after completion, set blurOnComplete to true.

import { PinInput } from '@fidely-ui/react'

export const PinInputBlur = () => {
  return (
    <PinInput.Root blurOnComplete>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

With Field

The Field component helps manage form-related state and accessibility attributes of a pin input.

It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Label

Additional Info

import { Field, PinInput } from '@fidely-ui/react'

export const PinInputField = () => {
  return (
    <Field.Root>
      <PinInput.Root>
        <PinInput.Label>Label</PinInput.Label>
        <PinInput.Control>
          {[0, 1, 2, 3].map((id, index) => (
            <PinInput.Input key={id} index={index} />
          ))}
        </PinInput.Control>
        <PinInput.HiddenInput />
      </PinInput.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
    </Field.Root>
  )
}

With alphanumeric

Pass the type prop to the PinInput.Root component to allow the user to enter alphanumeric characters.

Values can be either alphanumeric, numeric, or alphabetic

Enter Otp

import { PinInput } from '@fidely-ui/react/pin-input'

export const PinInputAlphanumeric = () => {
  return (
    <PinInput.Root type="alphanumeric">
      <PinInput.Label>Enter Otp</PinInput.Label>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

With Controlled

Pass the value and onValueChange props to the PinInPut.Root component to control the value of the pin input

Enter Otp

'use client'

import { PinInput } from '@fidely-ui/react/pin-input'
import { useState } from 'react'

export const PinInputControlled = () => {
  const [value, setValue] = useState(['', '', '', ''])

  return (
    <PinInput.Root value={value} onValueChange={(e) => setValue(e.value)}>
      <PinInput.Label>Enter Otp</PinInput.Label>
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
      <PinInput.HiddenInput />
    </PinInput.Root>
  )
}

Props

`Root`

Prop	Type	Default	Description
`placeholder`	`string`	`o`	The placeholder text for each input.
`type`	`'numeric' \| 'alphabetic' \| 'alphanumeric'`	`'numeric'`	The type of value the pin input should allow.
`colorPalette`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	-	The color palette of the component.
`size`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	The size of the component.
`variant`	`'outline' \| 'subtle' \| 'flushed'`	`'outline'`	The visual variant of the component.
`as`	`React.ElementType`	`-`	The underlying element to render.
`asChild`	`boolean`	`false`	Use the provided child element as the rendered element, merging their props and behavior.
`unstyled`	`boolean`	`false`	Removes all default styling from the component.
`autoFocus`	`boolean`	`false`	Automatically focuses the first input on mount.
`blurOnComplete`	`boolean`	`false`	Whether to blur the input when all fields are filled.
`count`	`number`	`4`	Number of input fields to render.
`defaultValue`	`string[]`	`[]`	The initial value of the pin input when uncontrolled.
`disabled`	`boolean`	`false`	Disables all inputs when set to true.
`form`	`string`	`-`	The associated form of the underlying input element.
`id`	`string`	`-`	The unique identifier for the pin input root.
`ids`	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string; }>`	`-`	Custom IDs for pin input elements. Useful for advanced composition.
`invalid`	`boolean`	`false`	Marks the input as invalid.
`mask`	`boolean`	`false`	If `true`, input values are masked (e.g., password dots).
`name`	`string`	`-`	The name of the input element for form submission.
`onValueChange`	`(details: ValueChangeDetails) => void`	`-`	Called when any input value changes.
`onValueComplete`	`(details: ValueChangeDetails) => void`	`-`	Called when all input fields have valid values.
`onValueInvalid`	`(details: ValueInvalidDetails) => void`	`-`	Called when an invalid value is entered.
`otp`	`boolean`	`false`	Enables `autocomplete="one-time-code"` for OTP entry.
`pattern`	`string`	`-`	A regular expression pattern the value must match.
`readOnly`	`boolean`	`false`	Makes all inputs read-only.
`required`	`boolean`	`false`	Marks the input as required.
`selectOnFocus`	`boolean`	`false`	Automatically selects the input’s value when focused.
`translations`	`IntlTranslations`	`-`	Provides localized strings for accessibility and internationalization.
`value`	`string[]`	`[]`	The controlled value of the pin input.

`Input`

Prop	Type	Default	Description
`index`	`number`	-	The index of the current input (0-based).
`asChild`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior.

`Control` and `Label`

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior.