# `EzAuth.UI.Core.Inputs`
[🔗](https://github.com/thiagomajesk/ez_auth/blob/v0.1.0/lib/ez_auth/ui/core/inputs.ex#L1)

Form input components for EzAuth flows.

Each public component wraps a labelled form control. Hosts compose
these directly: no identity configuration is read here; the caller
decides which inputs to render.

# `code`

Renders a row of single-character inputs for one-time code entry.

Submits `name[0]`, `name[1]`, ... as separate params so the server can
rejoin them. The `CodeInput` hook (in `priv/static/ez_auth.js`) handles
auto-advance, Arrow/Backspace navigation, and paste distribution. Hosts
must register the hook with their `LiveSocket`.

## Options

  * `:id` - unique id for the input group (required).
  * `:name` - base parameter name for the submitted code parts (required).
  * `:length` - number of boxes. Defaults to `6`.
  * `:format` - `:numeric` (digits only, default) or `:alphanumeric` (digits + letters).
    Gates the mask: the hook only advances focus when the typed character
    passes the mask.

## Styling

  * `[data-part="code-input"]` - code input container.
  * `[data-part="code-input-box"]` - each code entry box.
  * `[data-format={format}]` - active input mask on the container.

## Examples

    <EzAuth.UI.Core.Inputs.code id="verify-code" name="code" />
    <EzAuth.UI.Core.Inputs.code id="verify-code" name="code" length={4} />
    <EzAuth.UI.Core.Inputs.code id="verify-code" name="code" format={:alphanumeric} />

## Attributes

* `id` (`:string`) (required)
* `name` (`:string`) (required)
* `length` (`:integer`) - Defaults to `6`.
* `format` (`:atom`) - Defaults to `:numeric`. Must be one of `:numeric`, or `:alphanumeric`.
* Global attributes are accepted.

# `email`

Renders an email input.

## Options

  * `:field` - form field to bind to this input (required).
  * `:required` - whether the field is required. Defaults to `false`.

## Styling

  * `[data-part="field"]` - input container.
  * `[data-part="label"]` - visible field label.
  * `[data-part="input"]` - form control.
  * `[data-invalid]` - invalid state on the container.

## Examples

    <EzAuth.UI.Core.Inputs.email field={@form[:email]} required />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required)
* `required` (`:boolean`) - Defaults to `false`.
* Global attributes are accepted.

# `identity`

Renders a polymorphic identity input that adapts label, type, inputmode, and
autocomplete to whichever identity is currently active.

Detection is the caller's responsibility — pass the active atom via `:identity`
(typically computed from `EzAuth.Accounts.Identity.detect_identity/2` in the
parent's `phx-change` handler). The underlying input carries `phx-debounce="150"`
so the parent's change handler fires throttled. Before any identity is detected,
the input's `name=` is the literal `"_identity"` (underscore-prefixed like
Phoenix's `_target`), so submissions in the not-yet-detected state aren't
treated as real form fields.

## Options

  * `:form` - the form to derive `name=` from once an identity is detected (required).
  * `:identity` - the active identity (`:email | :phone | nil`). Defaults to `nil`.
  * `:accepts` - identity types this input can adapt to. Defaults to `[:email]`.
  * `:field` - form field to bind value/errors to. Optional.
  * `:value` - current typed value. Optional.

## Examples

    <EzAuth.UI.Core.Inputs.identity form={@form} identity={@detected} accepts={[:email, :phone]} />

## Attributes

* `id` (`:string`) (required)
* `form` (`Phoenix.HTML.Form`) (required)
* `identity` (`:atom`) (required)
* `accepts` (`:list`) - Defaults to `[:email]`.
* `value` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `input`

Renders a labelled input field.

The shared building block used by all input components in this module.
Accepts either a `Phoenix.HTML.FormField` (via `:field`) or raw
`:id`/`:name`/`:value` attributes.

## Options

  * `:field` - bound form field. When given, `:id`, `:name`, `:value`,
    and `:errors` are derived from it.
  * `:id` - DOM id. Required when `:field` is not given.
  * `:name` - form name attribute. Required when `:field` is not given.
  * `:value` - current value. Defaults to `nil`.
  * `:label` - visible label text. Optional.
  * `:type` - one of `text`, `email`, `tel`, `password`. Defaults to `text`.
  * `:errors` - list of error messages. Defaults to `[]`.

Extra attributes (`autocomplete`, `inputmode`, `placeholder`, etc.) are
forwarded to the underlying `<input>`.

## Styling

  * `[data-part="field"]` - input container.
  * `[data-part="label"]` - visible field label.
  * `[data-part="input"]` - form control.
  * `[data-invalid]` - invalid state on the container.

## Attributes

* `id` (`:any`) - Defaults to `nil`.
* `name` (`:any`)
* `label` (`:string`) - Defaults to `nil`.
* `value` (`:any`) - Defaults to `nil`.
* `type` (`:string`) - Defaults to `"text"`. Must be one of `"text"`, `"email"`, `"tel"`, or `"password"`.
* `field` (`Phoenix.HTML.FormField`)
* `errors` (`:list`) - Defaults to `[]`.
* Global attributes are accepted. Supports all globals plus: `["autocomplete", "disabled", "inputmode", "placeholder", "required"]`.

# `name`

Renders a full-name input.

## Options

  * `:field` - form field to bind to this input (required).
  * `:required` - whether the field is required. Defaults to `false`.

## Styling

  * `[data-part="field"]` - input container.
  * `[data-part="label"]` - visible field label.
  * `[data-part="input"]` - form control.
  * `[data-invalid]` - invalid state on the container.

## Examples

    <EzAuth.UI.Core.Inputs.name field={@form[:name]} required />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required)
* `required` (`:boolean`) - Defaults to `false`.
* Global attributes are accepted.

# `password`

Renders a password input.

## Options

  * `:field` - form field to bind to this input (required).
  * `:required` - whether the field is required. Defaults to `false`.
  * `:autocomplete` - browser autocomplete hint. Defaults to
    `"current-password"`. Use `"new-password"` in registration flows.

## Styling

  * `[data-part="field"]` - input container.
  * `[data-part="label"]` - visible field label.
  * `[data-part="input"]` - form control.
  * `[data-invalid]` - invalid state on the container.

## Examples

    <EzAuth.UI.Core.Inputs.password field={@form[:password]} required />
    <EzAuth.UI.Core.Inputs.password
      field={@form[:password]}
      autocomplete="new-password"
      required
    />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required)
* `required` (`:boolean`) - Defaults to `false`.
* `autocomplete` (`:string`) - Defaults to `"current-password"`.
* Global attributes are accepted.

# `phone`

Renders a phone input.

## Options

  * `:field` - form field to bind to this input (required).
  * `:required` - whether the field is required. Defaults to `false`.

## Styling

  * `[data-part="field"]` - input container.
  * `[data-part="label"]` - visible field label.
  * `[data-part="input"]` - form control.
  * `[data-invalid]` - invalid state on the container.

## Examples

    <EzAuth.UI.Core.Inputs.phone field={@form[:phone]} required />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required)
* `required` (`:boolean`) - Defaults to `false`.
* Global attributes are accepted.

# `username`

Renders a username input.

## Options

  * `:field` - form field to bind to this input (required).
  * `:required` - whether the field is required. Defaults to `false`.

## Styling

  * `[data-part="field"]` - input container.
  * `[data-part="label"]` - visible field label.
  * `[data-part="input"]` - form control.
  * `[data-invalid]` - invalid state on the container.

## Examples

    <EzAuth.UI.Core.Inputs.username field={@form[:username]} required />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required)
* `required` (`:boolean`) - Defaults to `false`.
* Global attributes are accepted.

---

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