Number Input

Anatomy

Label, optional trigger slots, bounds, and default value.

Minimal

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

With label

Quantity

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

With triggers

Quantity

    <.number_input 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>

Min, max & default value

Amount

    <.number_input
  class="number-input"
  min={0.0}
  max={100.0}
  step={5.0}
  value="10"
>
  <:label>Amount</: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>