Number Input

Style

Semantic colors, density, and corner radius via modifier classes and Tailwind max-w-* on the number input root.

Hex doc

Phoenix

Semantic

Use class="ui-{role}" to set the semantic palette of a number input.

Available options: accent, alert, brand, info, success

Default

Accent

Brand

Alert

Info

Success

    <.number_input class="number-input" value="1">
  <:label>Default</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-accent" value="1">
  <:label>Accent</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-brand" value="1">
  <:label>Brand</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-alert" value="1">
  <:label>Alert</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-info" value="1">
  <:label>Info</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-success" value="1">
  <:label>Success</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

Size

Use class="ui-size-{size}" to set the size of a number input.

Available options: xs, sm, md (default), lg, xl

    <.number_input class="number-input ui-size-sm" value="1">
  <:label>SM</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-size-md" value="1">
  <:label>MD</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-size-lg" value="1">
  <:label>LG</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-size-xl" value="1">
  <:label>XL</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a number input.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

None

Full

    <.number_input class="number-input ui-rounded-none" value="1">
  <:label>None</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-rounded-sm" value="1">
  <:label>SM</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-rounded-md" value="1">
  <:label>MD</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-rounded-lg" value="1">
  <:label>LG</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-rounded-xl" value="1">
  <:label>XL</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>
<.number_input class="number-input ui-rounded-full" value="1">
  <:label>Full</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

Max width

Without max-w-*, width comes from component CSS. Default for number-input: 5xs (width: 100%).

Use class="max-w-{step}" to set the maximum width of a number input root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs (default), 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (5xs)

none

full

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.number_input class="number-input" value="1">
  <:label>default (5xs)</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-none" value="1">
  <:label>none</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-full" value="1">
  <:label>full</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-9xs" value="1">
  <:label>9xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-8xs" value="1">
  <:label>8xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-7xs" value="1">
  <:label>7xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-6xs" value="1">
  <:label>6xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-5xs" value="1">
  <:label>5xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-4xs" value="1">
  <:label>4xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-3xs" value="1">
  <:label>3xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-2xs" value="1">
  <:label>2xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-xs" value="1">
  <:label>xs</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-sm" value="1">
  <:label>sm</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-md" value="1">
  <:label>md</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-lg" value="1">
  <:label>lg</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-xl" value="1">
  <:label>xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-2xl" value="1">
  <:label>2xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-3xl" value="1">
  <:label>3xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-4xl" value="1">
  <:label>4xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-5xl" value="1">
  <:label>5xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-6xl" value="1">
  <:label>6xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-7xl" value="1">
  <:label>7xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-8xl" value="1">
  <:label>8xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>

<.number_input class="number-input max-w-9xl" value="1">
  <:label>9xl</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" /></:increment_trigger>

</.number_input>