One-Time Password

Updated:

Use for entering a short one-time verification code.

Properties

The q2-otp element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

autoFocus
auto-focus

Focuses the first one-time password field when the component loads.

autoSubmit
auto-submit

Emits submission event when the last field is filled.

clearOnError
clear-on-error

Clears all fields and returns focus to the first field when state becomes error.

disabled

Disables all one-time password fields.

errorMessage
error-message

Error message rendered below the submit area.

Localizable
helperText
helper-text

Helper text content.

Localizable
label

Visible label above the one-time password fields.

Localizable
length

Number of one-time password fields. Use a number for ungrouped fields or an array for grouped fields with dash separators.

masked

Obscures entered characters.

processingLabel
processing-label

Button text during processing.

Localizable
sendCodeLabel
send-code-label

Button text for the send-code action.

Localizable
showHelperText
show-helper-text

Toggles helper text visibility.

showSendCode
show-send-code

Toggles visibility of the send-code button while state is ready.

state

Sets the visual status for the one-time password fields.

  • ready — Shows the send-code button when showSendCode is enabled and hides the input fields until the user requests a code.
  • error — Displays an error style on the fields. If errorMessage is set, it renders below the submit area. When clearOnError is enabled, all fields are cleared and focus returns to the first field.
  • success — Locks the input, replaces the submit button with a success indicator, and displays the successMessage if provided.
  • verifying — Locks the input and puts the submit button into a loading state. When combined with autoSubmit, a processing overlay with processingLabel is shown over the fields.
submitLabel
submit-label

Renders a submit button with this label.

Localizable
successMessage
success-message

Success message rendered below the submit area.

Localizable
value

The composed one-time password value.

Events

The q2-otp element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

tctClear

Emitted when the fields are cleared.

Event Detail Type signature

{ value: string; }

tctComplete

Emitted when all fields are filled.

Event Detail Type signature

{ value: string; }

tctInput

Emitted when any field value changes.

Event Detail Type signature

{ value: string; }

tctSendCode

Emitted when the send-code button is clicked.

Event Detail Type signature

void

tctSubmit

Emitted when the submit button is clicked or auto-submit triggers.

Event Detail Type signature

{ value: string; }

Methods

The q2-otp element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

clear

Clears all fields, focuses the first field, and emits tctClear.

Type signature

clear() => Promise<void>

reset

Clears the component and resets error, success, and processing state.

Type signature

reset() => Promise<void>

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-otp component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

Dependencies

This component uses other components in the Tecton library, including:

  • q2-message
  • q2-loading
  • q2-btn
  • q2-icon

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (9)