Pin Input | Park UI

Installation

npx @park-ui/cli@next add pin-input

Add Component

Copy the code snippet below into you components folder.

'use client'
import { PinInput } from '@ark-ui/react/pin-input'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { pinInput } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(pinInput)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(PinInput.Root, 'root', {
  forwardProps: ['mask'],
})
export const RootProvider = withProvider(PinInput.RootProvider, 'root')
export const Control = withContext(PinInput.Control, 'control')
export const HiddenInput = PinInput.HiddenInput
export const Input = withContext(PinInput.Input, 'input')
export const Label = withContext(PinInput.Label, 'label')

export { PinInputContext as Context } from '@ark-ui/react/pin-input'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { pinInputAnatomy } from '@ark-ui/react/pin-input'
import { defineSlotRecipe } from '@pandacss/dev'
import { input } from './input'

export const pinInput = defineSlotRecipe({
  className: 'pin-input',
  slots: pinInputAnatomy.keys(),
  base: {
    input: {
      ...input.base,
      textAlign: 'center',
      width: 'var(--input-height)',
      px: '1!',
    },
    control: {
      display: 'inline-flex',
      gap: '2',
      isolation: 'isolate',
    },
  },
  defaultVariants: {
    size: 'md',
    variant: 'outline',
  },

  variants: {
    size: {
      xs: {
        input: input.variants?.size?.xs,
      },
      sm: {
        input: input.variants?.size?.sm,
      },
      md: {
        input: input.variants?.size?.md,
      },
      lg: {
        input: input.variants?.size?.lg,
      },
      xl: {
        input: input.variants?.size?.xl,
      },
      '2xl': {
        input: input.variants?.size?.['2xl'],
      },
    },
    variant: {
      outline: { input: input.variants?.variant?.outline },
      subtle: { input: input.variants?.variant?.subtle },
      flushed: { input: input.variants?.variant?.flushed },
    },
  },
})

Usage

import { PinInput } from '@/components/ui'

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

Info

If you prefer a closed component composition, check out the snippet below.

Examples

Sizes

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

Variants

Pass the variant prop to change the visual style of the pin input component.

One time code

Pass the otp prop to make the pin input component behave like a one-time code input. This helps improve the user experience when entering OTP codes.

Mask

Pass the mask prop to obscure the entered pin code.

Placeholder

Pass the placeholder prop to add a placeholder to the pin input.

Field

Here's an example of how to compose the Field and the PinInput components.

Enter the 4-digit pin sent to your email address.

Controlled

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

Alphanumeric

Pass the type prop to allow the user to enter alphanumeric characters.

Closed Component

Here's how to setup the Pin input for a closed component composition.

'use client'
import { forwardRef, type InputHTMLAttributes, type RefObject } from 'react'
import { Group, PinInput as StyledPinInput } from '@/components/ui'

export interface PinInputProps extends StyledPinInput.RootProps {
  rootRef?: RefObject<HTMLDivElement | null>
  count?: number
  inputProps?: InputHTMLAttributes<HTMLInputElement>
  attached?: boolean
}

export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(function PinInput(props, ref) {
  const { count = 4, inputProps, rootRef, attached, ...rest } = props
  return (
    <StyledPinInput.Root ref={rootRef} {...rest}>
      <StyledPinInput.HiddenInput ref={ref} {...inputProps} />
      <StyledPinInput.Control>
        <Group attached={attached}>
          {Array.from({ length: count }).map((_, index) => (
            <StyledPinInput.Input key={index} index={index} />
          ))}
        </Group>
      </StyledPinInput.Control>
    </StyledPinInput.Root>
  )
})

And use it like this:

<PinInput mask />

Props

Root

Prop	Default	Type
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'flushed'`
`placeholder`	`\○\`	`string` The placeholder text for the input
`type`	`\numeric\`	`'numeric' \| 'alphabetic' \| 'alphanumeric'` The type of value the pin-input should allow
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`		`boolean` Whether to auto-focus the first input.
`blurOnComplete`		`boolean` Whether to blur the input when the value is complete
`count`		`number` The number of inputs to render to improve SSR aria attributes. This will be required in next major version.
`defaultValue`		`string[]` The initial value of the the pin input when rendered. Use when you don't need to control the value of the pin input.
`disabled`		`boolean` Whether the inputs are disabled
`form`		`string` The associate form of the underlying input element.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string hiddenInput: string label: string control: string input: (id: string) => string }>` The ids of the elements in the pin input. Useful for composition.
`invalid`		`boolean` Whether the pin input is in the invalid state
`mask`		`boolean` If `true`, the input's value will be masked just like `type=password`
`name`		`string` The name of the input element. Useful for form submission.
`onValueChange`		`(details: ValueChangeDetails) => void` Function called on input change
`onValueComplete`		`(details: ValueChangeDetails) => void` Function called when all inputs have valid values
`onValueInvalid`		`(details: ValueInvalidDetails) => void` Function called when an invalid value is entered
`otp`		`boolean` If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
`pattern`		`string` The regular expression that the user-entered input value is checked against.
`readOnly`		`boolean` Whether the pin input is in the valid state
`required`		`boolean` Whether the pin input is required
`selectOnFocus`		`boolean` Whether to select input value when input is focused
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`string[]` The controlled value of the the pin input.

Input

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