PinInput

Capture pin code or one time password from the user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

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


function Demo() {
  return (
    <Group position="center">
      <PinInput />
    </Group>
  );
}

Length

Set length prop to control number of rendered fields:

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


function Demo() {
  return (
    <Group position="center">
      <PinInput length={6} />
    </Group>
  );
}

Type

By default, PinInput accepts letters and numbers. To allow numbers only, set type="number":

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


function Demo() {
  return (
    <Group position="center">
      <PinInput type="number" />
    </Group>
  );
}

Regex type

You can use regular expression to validate user input. Characters that do not match 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, Group } from '@mantine/core';


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

Placeholder

Set placeholder to change placeholder of all fields. Note that it only accepts strings:

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


function Demo() {
  return (
    <Group position="center">
      <PinInput placeholder="⊡" />
    </Group>
  );
}

Disabled state

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


function Demo() {
  return (
    <Group position="center">
      <PinInput disabled />
    </Group>
  );
}

Error state

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


function Demo() {
  return (
    <Group position="center">
      <PinInput error />
    </Group>
  );
}

Masked

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


function Demo() {
  return (
    <Group position="center">
      <PinInput mask />
    </Group>
  );
}

One time code

Some operating systems expose 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 keyboard-suggestion. Prop oneTimeCode makes your input setting autocomplete="one-time-code" which allows using that feature.

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


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

Accessibility

Inputs do not have associated labels, set aria-label to make component visible to screen reader:

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


function OneTimeCodeInput() {
  return <PinInput aria-label="One time code" />;
}
Go back
PasswordInput – @mantine/core
Up next
Radio – @mantine/core

PinInput component props

NameTypeDescription
autoFocus
boolean
If set, first input is focused when component is mounted
defaultValue
string
Default value for uncontrolled component
disabled
boolean
Sets inputs disabled attribute
error
boolean
Adds error styles to all inputs
form
string
Hidden input form attribute
icon
ReactNode
Adds icon on the left side of input
iconWidth
Width<string | number>
Width of icon section
id
string
The top-level id that is used as a base in all input fields
inputMode
"text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"
inputmode attr, inferred from type prop if not specified
inputType
HTMLInputTypeAttribute
Inputs type attribute, inferred from type prop if not specified
length
number
Number of input boxes
manageFocus
boolean
Determines whether focus should be moved automatically to the next input once filled
mask
boolean
Changes input type to "password"
name
string
Hidden input name attribute
onChange
(value: string) => void
Called when value changes
onComplete
(value: string) => void
Called when user enters value to all inputs
oneTimeCode
boolean
Determines whether autocomplete="one-time-code" attribute should be set on all inputs
placeholder
string
Placeholder for every input field
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
readOnly
boolean
Determines whether the user can edit input content
required
boolean
Sets required on input element
rightSection
ReactNode
Right section of input, similar to icon but on the right
rightSectionProps
Record<string, any>
Props spread to rightSection div element
rightSectionWidth
Width<string | number>
Width of right section, is used to calculate input padding-right
size
"xs" | "sm" | "md" | "lg" | "xl"
Input width and height
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.spacing or any valid CSS value to set spacing between inputs
type
"number" | RegExp | "alphanumeric"
The type of allowed values
value
string
Value for controlled component
variant
Variants<"unstyled" | "default" | "filled">
Defines input appearance, defaults to default in light color scheme and filled in dark
wrapperProps
Record<string, any>
Properties spread to root element

PinInput component Styles API

NameStatic selectorDescription
root.mantine-PinInput-rootRoot element
wrapper.mantine-PinInput-wrapperRoot Input element
icon.mantine-PinInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
input.mantine-PinInput-inputMain input element
rightSection.mantine-PinInput-rightSectionInput right section, controlled by rightSection prop
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter