Input OTP

The InputOtp component enables users to enter one-time passwords (OTP). It is built on top of the input-otp library by @guilherme_rodz.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Usage

Disabled

The isDisabled prop disables user interaction with the InputOtp component.

Read Only

The isReadOnly prop makes the InputOtp component read-only while maintaining its visual appearance.

Required

The isRequired prop marks the InputOtp as a required field.

Sizes

The size of the InputOtp can be customized using the size prop. The default value is md.

Colors

Color of the InputOtp can be changed by color property.

Variants

Styling/Variant of the InputOtp can be changed by variant property. By default, variant property is set to flat.

Radius

Radius of the InputOtp can be changed by radius property. By default, radius property is set to md.

Password

InputOtp can be used as password/secured-pin input by setting type as password.

Description

Description of the InputOtp can be set by description property.

Error Message

Custom error message of the InputOtp can be set by errorMessage property.

Allowed Keys

• The InputOtp component only accepts specified input keys. Any other input is ignored.
• You can customize the allowed keys using the allowedKeys prop, which accepts a regex pattern.
• By default, allowedKeys is set to ^[0-9]*$ (only numerical digits).

Controlled

React Hook Form

You can use InputOtp with React Hook Form for form validation and submission handling.

Different Lengths & Validation

The InputOtp component supports different lengths through the length property. You can set the number of input segments by passing a number value to the length prop. Common use cases include 4-digit PINs and 6-digit authentication codes.

Custom Styles

You can customize the styles of the InputOtp component using the classNames prop.

Slots

• base: InputOtp wrapper, it handles alignment, placement, and general appearance.
• wrapper: Wraps the underlying input-otp component. Sent as containerClassName prop to underlying input-otp component.
• input: The input element.
• segmentWrapper: Wraps all the segment elements.
• segment: The segment element.
• caret: The caret represents the typing indicator of the input-otp component.
• passwordChar: The passwordChar represents the text styling when input-type is password.
• helperWrapper: Wraps the description and the errorMessage.
• description: The description of the input-otp.
• errorMessage: The error message of the input-otp.

Data Attributes

InputOtp has the following attributes on the base element:

• data-invalid: When the input-otp is invalid. Based on isInvalid prop.
• data-required: When the input-otp is required. Based on isRequired prop.
• data-readonly: When the input-otp is readonly. Based on isReadOnly prop.
• data-filled: When the input-otp is completely filled.
• data-disabled: When the input-otp is disabled. Based on isDisabled prop.

InputOtp also has the following attributes on the segment element:

• data-active: When the segment is active.
• data-focus: When the segment is focused.
• data-focus-visible: When the segment is focused visible.
• data-has-value: When the segment has value.

Accessibility

• Built on top of input-otp.
• Required and invalid states exposed to assistive technology via ARIA.
• Support for description and error message help text linked to the input-otp via ARIA.
• Keyboard navigation:
  • Tab: Moves focus between input segments
  • Arrow keys: Navigate between segments
  • Backspace: Clears current segment and moves focus to previous segment
• ARIA attributes:
  • aria-invalid: Indicates validation state
  • aria-required: Indicates if the input is required

API

InputOtp Props

InputOtp Events