[ @sdxc/ui/mixins ]
otpSlots
Focus coordination for an OtpField group.
import { otpSlots } from "@sdxc/ui/mixins";Usage
Coordinates focus across an OtpField group's slot inputs identified by OTP_SLOT_ATTRIBUTE, querying them fresh on every interaction so slots can be added, removed, or disabled without the mixin losing sync.
Signature
otpSlots(): MixinDescriptor<HTMLElement>Examples
<div role="group" mix={otpSlots()}>
<input data-otp-slot maxLength={1} inputMode="numeric" aria-label={t("otp.slot", { position: 1 })} />
<input data-otp-slot maxLength={1} inputMode="numeric" aria-label={t("otp.slot", { position: 2 })} />
<input data-otp-slot maxLength={1} inputMode="numeric" aria-label={t("otp.slot", { position: 3 })} />
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
OtpCompleteEvent
Dispatched on the OtpField group host by otpSlots the moment every slot holds a character, carrying the assembled code for validation or auto-submit; redispatches only when the assembled code actually changes.
new OtpCompleteEvent(code: string)| Property | Type | Description |
|---|---|---|
code | readonly string | Slot values joined in document order, one character per slot. |
OTP_SLOT_ATTRIBUTE
Attribute every OtpField slot input exposes itself on. otpSlots() reads
every element carrying this attribute beneath the host, in document
order, to find each slot's neighbors and assemble the full code.
const OTP_SLOT_ATTRIBUTE = "data-otp-slot"