@chakra-ui/pin-input

What is @chakra-ui/pin-input?

@chakra-ui/pin-input is a component library for creating PIN input fields in React applications. It provides a set of components that make it easy to build PIN input forms with various customization options, such as managing focus, handling input values, and styling.

What are @chakra-ui/pin-input's main functionalities?

Basic PIN Input

This code demonstrates a basic PIN input with four fields. The `PinInput` component wraps around `PinInputField` components to create a PIN input form.

```jsx
import { PinInput, PinInputField } from '@chakra-ui/pin-input';

function BasicPinInput() {
  return (
    <PinInput>
      <PinInputField />
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  );
}
```

Controlled PIN Input

This code demonstrates a controlled PIN input where the value is managed by the component's state. The `value` and `onChange` props are used to control the input.

```jsx
import { useState } from 'react';
import { PinInput, PinInputField } from '@chakra-ui/pin-input';

function ControlledPinInput() {
  const [value, setValue] = useState('');

  return (
    <PinInput value={value} onChange={setValue}>
      <PinInputField />
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  );
}
```

Custom Length PIN Input

This code demonstrates a PIN input with a custom length of six fields. The `length` prop is used to specify the number of input fields.

```jsx
import { PinInput, PinInputField } from '@chakra-ui/pin-input';

function CustomLengthPinInput() {
  return (
    <PinInput size="lg" length={6}>
      <PinInputField />
      <PinInputField />
      <PinInputField />
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  );
}
```

Masked PIN Input

This code demonstrates a masked PIN input where the input values are hidden. The `type` prop is set to `password` to mask the input.

```jsx
import { PinInput, PinInputField } from '@chakra-ui/pin-input';

function MaskedPinInput() {
  return (
    <PinInput type="password">
      <PinInputField />
      <PinInputField />
      <PinInputField />
      <PinInputField />
    </PinInput>
  );
}
```

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.

README

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