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

Password input with a visibility toggle button.

Provides a styled `<input type="password">` wrapped in a relative container
with an absolute-positioned toggle button that switches the input between
`type="password"` (hidden) and `type="text"` (visible) via LiveView JS.

The toggle is purely client-side — no server round-trip required. Keyboard
and pointer accessible: the button has `type="button"` so it does not submit
forms, and carries an `aria-label="Show password"` for screen readers.

## Basic usage

    <.password_input name="password" id="pwd" placeholder="Enter password" />

## With default value (edit form)

    <.password_input id="pwd" name="password" value={@user.password} />

## Form-integrated (with label and error display)

    <.form_password_input field={@form[:password]} label="Password" />

## New password (sign-up form)

    <.form_password_input
      field={@form[:password]}
      label="New password"
      autocomplete="new-password"
    />

## Disabled state

    <.password_input id="pwd" name="password" disabled={true} />

## Class customisation

Pass `:class` to merge extra Tailwind utilities into the `<input>` element
via `cn/1`. Last-wins semantics apply:

    <.password_input id="pwd" name="password" class="font-mono tracking-widest" />

# `form_password_input`

Renders a labeled password input integrated with `Phoenix.HTML.FormField`.

Produces a `<div>` containing:
1. An optional `<label>` linked via `for`/`id`
2. The `password_input/1` component with the field's id, name, and value
3. One `<p class="text-sm text-destructive">` per changeset error

## Examples

    <%!-- Sign-in form --%>
    <.form_password_input field={@form[:password]} label="Password" />

    <%!-- Sign-up form with new-password autocomplete --%>
    <.form_password_input
      field={@form[:password]}
      label="New password"
      autocomplete="new-password"
    />

    <%!-- Disabled --%>
    <.form_password_input field={@form[:password]} label="Password" disabled={true} />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required) - A `Phoenix.HTML.FormField` struct from `@form[:field_name]`. Provides id, name, value, and errors.
* `label` (`:string`) - Label text rendered above the input. When nil, no label element is rendered. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes forwarded to the inner `password_input/1`. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes forwarded to the inner `password_input/1`. Supports all globals plus: `["disabled", "required", "autocomplete", "placeholder"]`.

# `password_input`

Renders a password input with an inline visibility toggle button.

The toggle uses `Phoenix.LiveView.JS.toggle_attribute/2` to switch the
input's `type` attribute between `"password"` and `"text"` on the client —
no server round-trip is needed.

Wrap in `form_password_input/1` when you need label + error integration with
a `Phoenix.HTML.FormField`.

## Examples

    <%!-- Standalone input --%>
    <.password_input id="pwd" name="password" placeholder="Enter password" />

    <%!-- With a known value --%>
    <.password_input id="confirm_pwd" name="confirm_password" value={@confirm} />

    <%!-- Disabled --%>
    <.password_input id="legacy" name="old_password" disabled={true} />

## Attributes

* `id` (`:string`) - HTML id for the `<input>`. Required for the JS toggle to work. Auto-generated if nil. Defaults to `nil`.
* `name` (`:string`) (required) - HTML name attribute for the `<input>` element.
* `value` (`:string`) - Current input value. Defaults to `nil`.
* `placeholder` (`:string`) - Placeholder text shown when the field is empty. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables both the input and the toggle button. Defaults to `false`.
* `required` (`:boolean`) - Marks the input as required for native form validation. Defaults to `false`.
* `autocomplete` (`:string`) - Autocomplete hint. Use "new-password" on sign-up forms. Defaults to `"current-password"`.
* `class` (`:string`) - Additional Tailwind classes merged into the `<input>` element via `cn/1`. Defaults to `nil`.

---

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