Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7

Form usage

OTP fields often represent one step inside a larger approval or verification form.

Input OTP form usage

Live form

Verify the release request

Use the OTP input as part of a final verification form step.

Value: 28 · Complete event: —

Verification passcode

A straightforward six-digit verification step with completion feedback.

Verification passcode (Plain-CSS)

Verification flow

A straightforward numeric code step with completion feedback.

Value: 28

Complete event: —

Masked recovery code

An alphanumeric recovery step with masked slots and a calmer caution tone.

Masked recovery code (Plain-CSS)

Recovery code

Alphanumeric entry with masking for sensitive approval checkpoints.

Value: A1B