One Time Code

It presents a group of text fields, each accepting a single character, forming a code. The next character to be typed is always automatically focused. Includes support for content pasted from the desktop and a custom action can be performed after typing the last character.

About

This is a component built from scratch, addressing all the flaws found in similar libraries - with all the look and feel of DS. No dependencies, which makes it extremely lightweight and attractive.

Installation

pnpm add @inpulse-ds/otc

Usage

This component needs to be in the context of a form to be rendered. Make sure it is applied this way.

import { useForm } from "react-hook-form";
import { Form } from '@inpulse-ds/form';
import { OneTimeCode } from '@inpulse-ds/otc';
 
const methods = useForm();
 
export function Demo() {
  return (
    <Form methods={methods}>
      <OneTimeCode name="input" label="Input" length={6} />
    </Form>
  );
}

Default

The rift variation, as it does not include a label, has the same style as the default one.

Line

Sizes

It is possible to define the size of the text field using the size property. The available options are sm, md and lg.

<OneTimeCode name="input" size="lg" />

Number of characters

Define the number of characters with the length property. The default value is 6.

<OneTimeCode name="input" length={4} />

Action

A custom action can be performed after typing the last character. To do this, use the action property. If no action is defined, nothing will be executed, leaving the form to send the data.

<OneTimeCode name="input" action={(data) => console.log(data)} />