Pin Input

The PinInput component is optimized for entering sequences of digits. The most common application is for entering single-use security codes. It is optimized for entering digits quickly.

Installation

yarn add @chakra-ui/pin-input

or

npm i @chakra-ui/pin-input

Import component

import {
  PinInput,
  PinInputField,
  usePinInput,
  usePinInputField,
} from "@chakra-ui/pin-input"

Usage

Chakra UI exports two primary components, PinInput and PinInputField to compose a PinInput component. Chakra UI also provides hooks to can create a custom PinInput component.

<PinInput defaultValue="234">
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

function PinInputHookExample() {
  const context = usePinInput({ autoFocus: true })
  const input1 = usePinInputField({ context })
  const input2 = usePinInputField({ context })
  const input3 = usePinInputField({ context })
  const input4 = usePinInputField({ context })

  return (
    <div>
      <input style={style} {...input1} />
      <input style={style} {...input2} />
      <input style={style} {...input3} />
      <input style={style} {...input4} />
    </div>
  )
}

Sizes

<PinInput size="lg" defaultValue="234">
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

Controlled

function ControlledPinInput() {
  const [value, setValue] = React.useState("")

  const handleChange = (value: string) => {
    setValue(value)
  }

  const handleComplete = (value: string) => {
    console.log(value)
  }
  return (
    <PinInput value={value} onChange={handleChange} onComplete={handleComplete}>
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  )
}