PinInput

Usage

import { PinInput } from '@mantine/core';

function Demo() {
  return <PinInput />
}

Controlled

import { useState } from 'react';
import { PinInput } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return <PinInput value={value} onChange={setValue} />;
}

Uncontrolled

PinInput can be used with uncontrolled forms the same way as a native input element. Set the name attribute to include pin input value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.

Example usage of uncontrolled PinInput with FormData:

import { PinInput } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('PIN value:', formData.get('pin'));
      }}
    >
      <PinInput
        name="pin"
        length={4}
        oneTimeCode
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Regex type

You can use a regular expression to validate user input. Characters that do not match the given expression will be disregarded. For example, to create a PinInput that will accept only numbers from 0 to 3, set type={/^[0-3]+/}:

import { PinInput } from '@mantine/core';

function Demo() {
  return <PinInput type={/^[0-3]*$/} inputType="tel" inputMode="numeric" />;
}

One time code

Some operating systems expose the last received SMS code to be used by applications like your keyboard. If the current form input asks for this code, your keyboard adapts and proposes the code as a keyboard suggestion. The oneTimeCode prop makes your input set autocomplete="one-time-code" which allows using that feature.

import { PinInput } from '@mantine/core';

function OneTimeCodeInput() {
  return <PinInput oneTimeCode />;
}

Styles API

PinInput supports the Styles API; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.

/*
 * Hover over selectors to apply outline styles
 *
 */

Accessibility

Inputs do not have associated labels. Set aria-label to make the component visible to screen readers:

import { PinInput } from '@mantine/core';

function Accessibility() {
  return <PinInput aria-label="One time code" />;
}