@chakra-ui/pin-input

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>
  )
}

Similar packages

Other packages similar to @chakra-ui/pin-input

react-pin-input

react-pin-input is a React component for creating PIN input fields. It offers similar functionality to @chakra-ui/pin-input, including customizable length, focus management, and styling options. However, it may not integrate as seamlessly with the Chakra UI ecosystem.

react-code-input

react-code-input is another React component for creating code or PIN input fields. It provides a variety of customization options, such as different input types and styles. Compared to @chakra-ui/pin-input, it offers more flexibility in terms of input types but may require additional styling to match Chakra UI's design system.

react-otp-input

react-otp-input is a React component specifically designed for OTP (One Time Password) inputs. It supports features like auto-focus, customizable length, and input masking. While it offers similar functionality to @chakra-ui/pin-input, it is more focused on OTP use cases and may not provide the same level of integration with Chakra UI.