EmpireUI

Docs

Passcode Card

The PasscodeCard component provides an interactive passcode entry interface where users can input a passcode of customizable length. This component is ideal for scenarios where a secure passcode entry is required, such as for authentication or restricted access features.

Enter Passcode

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Enter your 6-digit passcode

Installation

npx empire@latest add passcode-card

Props

Prop name	Type	Description
`correctPasscode`	`string`	The correct passcode that will be verified.
`length`	`number`	The number of digits in the passcode input.

Interactions

When a user enters an incorrect passcode, the card shakes to indicate failure, and the input is cleared after a brief delay.
On entering the correct passcode, a success message appears.
Users can reset the input using the "Reset" button.