Phoenix implementation of Zag.js Password Input.

Examples

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>

Phoenix Form Integration

When using with Phoenix forms, you must add an id to the form using the Corex.Form.get_form_id/1 function.

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} id={Corex.Form.get_form_id(@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

When using in a Live view add controlled mode. 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} id={get_form_id(@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

Styling

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"] {}

If you wish to use the default Corex styling, you can use the class password-input on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

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

You can then use modifiers

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

Learn more about modifiers and Corex Design