# `PhiaUi.Components.InputOtp`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/input_otp.ex#L1)

One-time password (OTP) input component with individual digit slots.

Provides a composable OTP input following the shadcn/ui InputOTP anatomy
adapted for Phoenix LiveView. Each digit is rendered as a separate
`<input type="text" maxlength="1">` element with automatic focus advancement
on input and focus-back-on-backspace behaviour via inline `onkeyup` /
`onkeydown` handlers.

No external JS hook required — navigation is handled with minimal inline
event handlers.

## Enhancements

- `type` — `:numeric` (default) or `:alphanumeric` (pattern `[A-Za-z0-9]`)
- `separator` — character shown between the two halves (e.g. `"-"`)
- `grouped` — visual grouping: removes inner rounded corners and gaps

## Sub-components

| Component           | Element              | Purpose                                             |
|---------------------|----------------------|-----------------------------------------------------|
| `input_otp/1`       | Group + N slots      | Simple all-in-one OTP field (most common usage)     |
| `input_otp_group/1` | `<div role="group">` | Container that groups slots and separators          |
| `input_otp_slot/1`  | `<input type="text">`| Individual digit cell                               |
| `input_otp_separator/1` | `<div aria-hidden>` | Visual separator between slot groups             |

## Simple usage

    <%!-- 6-digit numeric OTP --%>
    <.input_otp id="otp" name="otp" value={@otp} />

    <%!-- 6-digit alphanumeric with separator and grouping --%>
    <.input_otp id="code" name="code" value={@code} type={:alphanumeric} separator="-" grouped={true} />

    <%!-- 4-digit PIN --%>
    <.input_otp id="pin" name="pin" value={@pin} length={4} />

# `input_otp`

Renders a complete OTP input field as a group of individual digit slots.

## Attributes

* `id` (`:string`) (required) - Base ID for the group and each individual slot. Slot IDs are derived as `#{id}-#{index}`.
* `length` (`:integer`) - Total number of digit slots to render. Defaults to `6`.
* `name` (`:string`) - Base name for slots. Each slot name is `#{name}[#{index}]`. Defaults to `nil`.
* `value` (`:string`) - Current OTP string. Characters are distributed to slots by position. Defaults to `""`.
* `disabled` (`:boolean`) - When `true`, all digit slots are disabled. Defaults to `false`.
* `type` (`:atom`) - `:numeric` uses `inputmode=numeric`. `:alphanumeric` uses `inputmode=text` with pattern. Defaults to `:numeric`. Must be one of `:numeric`, or `:alphanumeric`.
* `separator` (`:string`) - Character shown between the two halves of slots (e.g. `"-"`). Nil = no separator. Defaults to `nil`.
* `grouped` (`:boolean`) - When `true`, removes inner rounded corners/gaps to visually group slots per half. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged into the group container via `cn/1`. Defaults to `nil`.

# `input_otp_group`

Renders the OTP group container `<div role="group">`.

## Attributes

* `id` (`:string`) - ID for the group container element. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes forwarded to the group `<div>`.
## Slots

* `inner_block` (required) - Slot content: `input_otp_slot/1` and `input_otp_separator/1` components.

# `input_otp_separator`

Renders a decorative separator `<div>` between OTP slot groups.

## Attributes

* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `input_otp_slot`

Renders a single OTP digit `<input type="text" maxlength="1">` cell.

## Attributes

* `index` (`:integer`) (required) - Zero-based slot position.
* `name` (`:string`) - The `name` attribute of the `<input>`. Defaults to `nil`.
* `value` (`:string`) - The current digit value. Defaults to `""`.
* `id` (`:string`) - ID for the `<input>` element. Defaults to `nil`.
* `next_id` (`:string`) - ID of the next slot for auto-advance. Defaults to `nil`.
* `prev_id` (`:string`) - ID of the previous slot for backspace-back. Defaults to `nil`.
* `disabled` (`:boolean`) - When `true`, disables the input. Defaults to `false`.
* `input_type` (`:atom`) - Input mode — `:numeric` or `:alphanumeric`. Defaults to `:numeric`. Must be one of `:numeric`, or `:alphanumeric`.
* `group_pos` (`:atom`) - Grouped position — `:first`, `:middle`, `:last`, `:standalone`, or `nil`. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes forwarded to the `<input>` element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*