Pin Input

The Pin Input component renders a group of individual character inputs for entering PINs, OTPs, or verification codes.

Basic Usage

import { PinInput } from "@paramanu/forms-react"

export default function App() {
  return (
    <PinInput>
      {[1, 2, 3, 4].map((i) => (
        <input key={i} maxLength={1} inputMode="numeric" aria-label={`Pin digit ${i}`} />
      ))}
    </PinInput>
  )
}

<div class="pm-pin-input pm-pin-input--md" role="group">
  <input class="pm-input pm-input--outline pm-input--md" type="text" inputmode="numeric" maxlength="1" aria-label="Pin digit 1" style="width:3rem;text-align:center" />
  <input class="pm-input pm-input--outline pm-input--md" type="text" inputmode="numeric" maxlength="1" aria-label="Pin digit 2" style="width:3rem;text-align:center" />
  <input class="pm-input pm-input--outline pm-input--md" type="text" inputmode="numeric" maxlength="1" aria-label="Pin digit 3" style="width:3rem;text-align:center" />
  <input class="pm-input pm-input--outline pm-input--md" type="text" inputmode="numeric" maxlength="1" aria-label="Pin digit 4" style="width:3rem;text-align:center" />
</div>

Accessibility

Feature	Detail
`role="group"`	Container groups the inputs
`aria-label`	Each input labeled with its digit position
Keyboard	Auto-advance focus on input

Best Practices

Label the group with a description of what the code is for.
Use inputMode="numeric" for mobile numeric keyboards.

Props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Input size
`disabled`	`boolean`	`false`	Disabled state
`invalid`	`boolean`	`false`	Invalid state
`length`	`number`	`4`	Number of input fields

CSS Classes

Class	Description
`pm-pin-input`	Wrapper base class
`pm-pin-input--md`	Medium size
`pm-pin-input--disabled`	Disabled state
`pm-pin-input--invalid`	Invalid state