PinInput

Capture PIN code or one-time password from the user. Supports automatic focus management and various input types.

Import

import { PinInput } from '@tidbcloud/uikit'

Basic Usage

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <PinInput />
}

Controlled

import { useState } from 'react'
import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState('')
  return <PinInput value={value} onChange={setValue} />
}

Length

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <PinInput length={6} />
}

Number Type

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <PinInput type="number" />
}

Custom Regex Type

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  // Only accept digits 0-3
  return <PinInput type={/^[0-3]*$/} inputType="tel" inputMode="numeric" />
}

One-Time Code

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  // Enables autocomplete="one-time-code" for SMS autofill
  return <PinInput oneTimeCode />
}

Masked Input

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <PinInput mask />
}

On Complete

import { PinInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <PinInput length={4} onComplete={(value) => console.log('Completed:', value)} />
}

Key Props

Prop	Type	Description
`value`	`string`	Controlled value
`onChange`	`(value: string) => void`	Called when value changes
`onComplete`	`(value: string) => void`	Called when all inputs filled
`length`	`number`	Number of inputs
`type`	`'number' \| 'alphanumeric' \| RegExp`	Allowed characters
`mask`	`boolean`	Hide input characters
`oneTimeCode`	`boolean`	Enable SMS autofill
`placeholder`	`string`	Input placeholder
`disabled`	`boolean`	Disable all inputs
`error`	`boolean`	Apply error styles
`size`	`MantineSize`	Input size
`radius`	`MantineRadius`	Border radius
`gap`	`MantineSpacing`	Gap between inputs
`manageFocus`	`boolean`	Auto-focus next input
`autoFocus`	`boolean`	Focus first input on mount

Pillsinput Popover