Components

Input OTP

A secure input field designed for entering one-time passwords (OTP), typically split into multiple boxes for better readability and user experience.

Introduction

The Input OTP component is a versatile and customizable component that allows you to easily create an OTP input field. It offers a range of features, including customizable separators, validation, and more. Shoutout to Guilherme Rodz for creating this amazing component.

Basic

Here’s the basic usage of the Input OTP component.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Separator

To include a separator between the OTP input groups, use the InputOTPSeparator component.

Controlled

To control the Input OTP component, utilize the value and onChange props.

Enter your one-time password.

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.