Phoenix implementation of Zag.js Number Input.

Examples

Basic

<.number_input id="num" class="number-input">
  <:label>Quantity</:label>
</.number_input>

With triggers

<.number_input id="num" class="number-input">
  <:label>Quantity</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>

With scrubber

<.number_input id="num" scrubber class="number-input">
  <:label>Quantity</:label>
  <:scrubber_trigger><.heroicon name="hero-arrows-up-down" class="icon rotate-90" /></:scrubber_trigger>
</.number_input>

Optional slots :decrement_trigger, :increment_trigger, and :scrubber_trigger render the button content (e.g. icons). When omitted, no content is shown.

Phoenix Form Integration

Use field={f[:key]} or field={@form[:key]} with a form built from an Ecto changeset. Set the form id with Corex.Form.get_form_id/1.

Controller

Build the form from a changeset and pass it to the template:

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

<.form :let={f} for={@form} id={Corex.Form.get_form_id(@form)} action={@action} method="post">
  <.number_input field={f[:value]} class="number-input">
    <:label>Quantity</:label>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.number_input>
  <button type="submit">Submit</button>
</.form>

Live View with Ecto changeset

Use a changeset and enable controlled mode so the LiveView stays in sync:

def mount(_params, _session, socket) do
  form =
    %MyApp.Form.Quantity{}
    |> MyApp.Form.Quantity.changeset(%{})
    |> Phoenix.Component.to_form(as: :quantity, id: "quantity-form")
  {:ok, assign(socket, :form, form)}
end

def handle_event("validate", %{"quantity" => params}, socket) do
  changeset =
    %MyApp.Form.Quantity{}
    |> MyApp.Form.Quantity.changeset(params)
    |> Map.put(:action, :validate)
  {:noreply, assign(socket, :form, Phoenix.Component.to_form(changeset, as: :quantity, id: "quantity-form"))}
end

<.form for={@form} id={Corex.Form.get_form_id(@form)} phx-change="validate" phx-submit="save">
  <.number_input field={@form[:value]} class="number-input" controlled on_value_change="value_changed">
    <:label>Quantity</:label>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.number_input>
  <button type="submit">Submit</button>
</.form>

Styling

Use data attributes to target elements:

[data-scope="number-input"][data-part="root"] {}
[data-scope="number-input"][data-part="control"] {}
[data-scope="number-input"][data-part="input"] {}
[data-scope="number-input"][data-part="trigger-group"] {}
[data-scope="number-input"][data-part="decrement-trigger"] {}
[data-scope="number-input"][data-part="increment-trigger"] {}
[data-scope="number-input"][data-part="scrubber"] {}

If you wish to use the default Corex styling, you can use the class number-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/number-input.css";

You can then use modifiers

<.number_input class="number-input number-input--accent number-input--lg" />

Learn more about modifiers and Corex Design