Phoenix implementation of Zag.js Password Input.

Anatomy

Minimal

<.password_input class="password-input">
  <:label>Password</:label>
  <:visible_indicator><.heroicon name="hero-eye" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" /></:hidden_indicator>
</.password_input>

Custom Error

<.password_input field={@form[:password]} class="password-input">
  <:label>Password</:label>
  <:error :let={msg}>
    <.heroicon name="hero-exclamation-circle" class="icon" />
    {msg}
  </:error>
  <:visible_indicator><.heroicon name="hero-eye" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" /></:hidden_indicator>
</.password_input>

Form

When using with Phoenix forms, set the form id in to_form/2 (for example to_form(changeset, as: :name, id: "my-form")) and use <.form for={@form}>.

For cross-cutting invalid styling and error presentation, see the Forms guide. Pass invalid={Corex.FormField.invalid?(@form[:password])} when you want alert borders after validation.

Controller

Build the form from an Ecto changeset:

def form_page(conn, _params) do
  form =
    %MyApp.Form.PasswordForm{}
    |> MyApp.Form.PasswordForm.changeset(%{})
    |> Phoenix.Component.to_form(as: :password_form, id: "password-form")
  render(conn, :form_page, form: form)
end

<.form :let={f} for={@form} action={@action} method="post">
  <.password_input field={f[:password]} class="password-input">
    <:label>Password</:label>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
    <:visible_indicator><.heroicon name="hero-eye" /></:visible_indicator>
    <:hidden_indicator><.heroicon name="hero-eye-slash" /></:hidden_indicator>
  </.password_input>
  <button type="submit">Submit</button>
</.form>

Live View

Prefer building the form from an Ecto changeset (see "With Ecto changeset" below).

With Ecto changeset

First create your schema and changeset:

defmodule MyApp.Accounts.User do
  use Ecto.Schema
  import Ecto.Changeset

  schema "users" do
    field :email, :string
    field :password, :string
    timestamps(type: :utc_datetime)
  end

  def changeset(user, attrs) do
    user
    |> cast(attrs, [:email, :password])
    |> validate_required([:email, :password])
    |> validate_length(:password, min: 8)
  end
end

defmodule MyAppWeb.UserLive do
  use MyAppWeb, :live_view
  alias MyApp.Accounts.User

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :form, to_form(User.changeset(%User{}, %{})))}
  end

  def handle_event("validate", %{"user" => user_params}, socket) do
    changeset = User.changeset(%User{}, user_params)
    {:noreply, assign(socket, form: to_form(changeset, action: :validate))}
  end

  def render(assigns) do
    ~H"""
    <.form for={@form} phx-change="validate">
      <.password_input field={@form[:password]} class="password-input">
        <:label>Password</:label>
        <:error :let={msg}>
          <.heroicon name="hero-exclamation-circle" class="icon" />
          {msg}
        </:error>
        <:visible_indicator><.heroicon name="hero-eye" /></:visible_indicator>
        <:hidden_indicator><.heroicon name="hero-eye-slash" /></:hidden_indicator>
      </.password_input>
    </.form>
    """
  end
end

API

Requires a stable id on <.password_input>.

Events

Pick an event name and pass it to on_* on <.password_input>.

Server events

on_visibility_change

<.password_input
  class="password-input"
  on_visibility_change="password_visibility_changed"
>
  <:label>Password</:label>
  <:visible_indicator><.heroicon name="hero-eye" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" /></:hidden_indicator>
</.password_input>

def handle_event("password_visibility_changed", %{"id" => _id, "visible" => visible}, socket) do
  {:noreply, assign(socket, :password_visible, visible)}
end

Client events

Style

Use data attributes to target elements:

[data-scope="password-input"][data-part="root"] {}
[data-scope="password-input"][data-part="label"] {}
[data-scope="password-input"][data-part="control"] {}
[data-scope="password-input"][data-part="input"] {}
[data-scope="password-input"][data-part="visibility-trigger"] {}
[data-scope="password-input"][data-part="indicator"] {}

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/password-input.css";

Stack modifiers on the host (class on <.password_input>).

Color

Size