Input OTP | RiseUI

One-time code input with grouped slots, variants, disabled/invalid states, and completion callbacks — aligned with HeroUI InputOTP.

Usage

Verify layout with label, description, 3│3 separator, and actions.

RiseInputOtp(
  length: 6,
  separatorBuilder: (_) => const RiseInputOtpSeparator(),
  onChanged: (v) {},
  onCompleted: (code) => debugPrint(code),
)

Four digits

PIN-style 4-slot input.

const RiseInputOtp(
  length: 4,
)

Disabled state

Non-interactive slots (Hero disabled story).

const RiseInputOtp(
  length: 6,
  isDisabled: true,
)

With pattern

Letters-only via RegExp (REGEXP_ONLY_CHARS).

RiseInputOtp(
  length: 6,
  pattern: RegExp(r'[a-zA-Z]'),
)

Controlled

Mirror the value from onChanged.

RiseInputOtp(
  length: 6,
  onChanged: (value) => setState(() => otp = value),
)

Variants

Primary (shadow-field) vs secondary (shadow-none).

const RiseInputOtp(
  length: 6,
  variant: RiseInputOtpVariant.secondary,
)

With validation

Submit hint 123456 + FieldError on mismatch.

RiseInputOtp(
  length: 6,
  isInvalid: hasError,
  onChanged: (v) => setState(() => code = v),
)

On complete

Fire logic when all slots are filled.

RiseInputOtp(
  length: 6,
  onCompleted: (code) => verify(code),
)

Form example

2FA-style copy with verify and backup link.

RiseInputOtp(
  length: 6,
  onChanged: (v) => setState(() => value = v),
  onCompleted: (_) => submit(),
)