# otpSlots

> Focus coordination for an OtpField group: advances focus on each typed digit, retreats on `Backspace` from an empty slot, and splits a pasted code across every slot it fits, starting at the slot that received it.

```ts
import { otpSlots } from "@sdxc/ui/mixins";
```

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

```ts
otpSlots(): MixinDescriptor<HTMLElement>
```

## Examples

```tsx
<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.

#### Signature

```ts
new OtpCompleteEvent(code: string)
```

#### Properties

| 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.

#### Signature

```ts
const OTP_SLOT_ATTRIBUTE = "data-otp-slot"
```