OtpField

A one-time password input composed of individual character slots.

import { OtpField } from '@ontoui/react';

<OtpField.Root length={6}>
  <OtpField.Input aria-label="Character 1 of 6" />
  <OtpField.Input aria-label="Character 2 of 6" />
  <OtpField.Input aria-label="Character 3 of 6" />
  <OtpField.Input aria-label="Character 4 of 6" />
  <OtpField.Input aria-label="Character 5 of 6" />
  <OtpField.Input aria-label="Character 6 of 6" />
</OtpField.Root>;

Anatomy

Part	Description
OtpField.Root	Container that groups all slots and manages shared state
OtpField.Input	An individual character input slot
OtpField.Separator	A visual separator between groups of slots

Examples

Grouped layout

Use OtpField.Separator to visually split slots into chunks, such as 123–456.

<OtpField.Root length={6}>
  <OtpField.Input aria-label="Character 1 of 6" />
  <OtpField.Input aria-label="Character 2 of 6" />
  <OtpField.Input aria-label="Character 3 of 6" />
  <OtpField.Separator />
  <OtpField.Input aria-label="Character 4 of 6" />
  <OtpField.Input aria-label="Character 5 of 6" />
  <OtpField.Input aria-label="Character 6 of 6" />
</OtpField.Root>

Disabled

Set disabled on OtpField.Root to disable the entire field.

<OtpField.Root length={6} disabled>
  <OtpField.Input aria-label="Character 1 of 6" />
  {/* … */}
</OtpField.Root>

API Reference

OtpField.Root

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
name?	string	—
length	number	—
defaultValue?	string	—
value?	string	—
autoComplete?	string	—
autoSubmit?	boolean	—
form?	string	—
mask?	boolean	—
validationType?	"numeric" | "alpha" | "alphanumeric" | "none"	—
disabled?	boolean	—
readOnly?	boolean	—
required?	boolean	—
onValueChange?	(value: string) => void	—
onValueComplete?	(value: string) => void	—
onValueInvalid?	(value: string) => void	—
ref?	Ref<HTMLDivElement>	—

OtpField.Input

Prop	Type	Default
className?	string	—
placeholder?	string	—
ref?	Ref<HTMLDivElement>	—

OtpField.Separator

Prop	Type	Default
className?	string	—
orientation?	"horizontal" | "vertical"	—
ref?	Ref<HTMLDivElement>	—