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><.icon name="hero-chevron-down" class="icon" /></:decrement_trigger>
  <:increment_trigger><.icon 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><.icon 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.

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