PhiaUi.Components.PasswordInput (phia_ui v0.1.17)

Copy Markdown View Source

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" />

Summary

Functions

form_password_input(assigns)

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

password_input(assigns)

Renders a password input with an inline visibility toggle button.

Functions

form_password_input(assigns)

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(assigns)

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.