@zag-js/pin-input

What is @zag-js/pin-input?

@zag-js/pin-input is a package that provides a set of utilities to create accessible and customizable pin input components. It is part of the Zag.js library, which focuses on building state machines for UI components. This package allows developers to easily implement pin input fields with features like validation, focus management, and more.

What are @zag-js/pin-input's main functionalities?

Basic Pin Input Setup

This code demonstrates how to set up a basic pin input component using the @zag-js/pin-input package. It uses the `usePinInput` hook to manage the state and behavior of the pin input fields. The `getInputProps` function is used to spread the necessary props onto each input element, ensuring they are correctly managed.

import { usePinInput } from '@zag-js/pin-input';

const PinInputComponent = () => {
  const { inputProps, getInputProps } = usePinInput({
    id: 'pin-input',
    onComplete: (value) => console.log('Pin complete:', value),
  });

  return (
    <div>
      <input {...getInputProps({ index: 0 })} />
      <input {...getInputProps({ index: 1 })} />
      <input {...getInputProps({ index: 2 })} />
      <input {...getInputProps({ index: 3 })} />
    </div>
  );
};

Custom Validation

This example shows how to implement custom validation logic in a pin input component. The `validate` function checks if the entered pin is exactly 4 digits long and consists only of numbers. The `onComplete` callback is triggered when a valid pin is entered.

import { usePinInput } from '@zag-js/pin-input';

const PinInputWithValidation = () => {
  const { inputProps, getInputProps } = usePinInput({
    id: 'pin-input',
    validate: (value) => value.length === 4 && !isNaN(Number(value)),
    onComplete: (value) => console.log('Valid pin:', value),
  });

  return (
    <div>
      <input {...getInputProps({ index: 0 })} />
      <input {...getInputProps({ index: 1 })} />
      <input {...getInputProps({ index: 2 })} />
      <input {...getInputProps({ index: 3 })} />
    </div>
  );
};

Other packages similar to @zag-js/pin-input

react-pin-input

react-pin-input is a React component for creating pin input fields. It provides a simple API for setting up pin inputs with customizable length and styling options. Compared to @zag-js/pin-input, react-pin-input is more focused on providing a straightforward component without the state machine approach, making it easier to use for simple use cases but less flexible for complex state management.

react-code-input

react-code-input is another React component for creating code or pin input fields. It offers customization options for styling and input length. While it provides similar functionality to @zag-js/pin-input, it does not offer the same level of accessibility features and state management capabilities provided by the state machine approach of Zag.js.

README

@zag-js/pin-input

Core logic for the pin-input widget implemented as a state machine

Installation

yarn add  @zag-js/pin-input
# or
npm i  @zag-js/pin-input

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.