إدخال الأرقام

النمط البصري

ألوان دلالية، درجات كثافة، وأدوات عرض عبر فئات المعدّل على الأكورديون.

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>

الحجم

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>

أقصى عرض

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>