Number Input — uicraft

Default

Basic number input with +/- buttons.

html

<div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border">
  <button class="uc-px-3 uc-py-2 uc-text-fg-disabled uc-hover:text-fg-primary uc-transition-colors" onclick="decrement(this)">
    <svg class="uc-w-4 uc-h-4"><!-- Minus --></svg>
  </button>
  <input type="number" value="1" min="0" max="99" class="uc-w-12 uc-text-center uc-text-sm uc-font-medium uc-border-0 uc-bg-transparent" />
  <button class="uc-px-3 uc-py-2 uc-text-fg-disabled uc-hover:text-fg-primary uc-transition-colors" onclick="increment(this)">
    <svg class="uc-w-4 uc-h-4"><!-- Plus --></svg>
  </button>
</div>

With Label

Number input paired with a label and helper text.

html

Quantity

Select between 1 and 99

<div>
  <label class="uc-text-sm uc-font-medium uc-mb-2 uc-block">Quantity</label>
  <div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border">...</div>
</div>

Sizes

Small, medium, and large number input variants.

html

<div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border uc-h-8 uc-text-xs">...</div>
<div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border uc-h-10">...</div>
<div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border uc-h-12 uc-text-base">...</div>

Min / Max

Number input with min and max constraints. Buttons disable at boundaries.

html

Min: 1, Max: 10

<div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border">
  <button onclick="decrement(this)">-</button>
  <input type="number" value="1" min="1" max="10" />
  <button onclick="increment(this)">+</button>
</div>
<p class="uc-text-xs uc-text-fg-disabled">Min: 1, Max: 10</p>

Disabled

Disabled state for read-only display.

html

<div class="uc-inline-flex uc-items-center uc-rounded-lg uc-border uc-opacity-50 uc-pointer-events-none">
  <button class="uc-px-3 uc-py-2" disabled>...</button>
  <input type="number" value="5" disabled class="uc-w-12 uc-text-center" />
  <button class="uc-px-3 uc-py-2" disabled>...</button>
</div>

Shopping Cart Example

Number input in a product card context.

🎧

Wireless Headphones

Premium noise cancelling

$299

API Reference

All data attributes and utility classes available for the Number Input component.

Class	Type	Description
`[data-number-input]`	Container	Wrapper element that groups buttons and input together
`[data-action="decrement"]`	Button	Decrement button — decreases value by 1
`[data-action="increment"]`	Button	Increment button — increases value by 1
`[data-number-value]`	Input	The number input field itself
`uc-h-8`	Size	Small size variant (height 32px)
`uc-h-10`	Size	Default size variant (height 40px)
`uc-h-12`	Size	Large size variant (height 48px)
`disabled`	State	Disabled state — reduced opacity, pointer events none

Accessibility

Keyboard and screen reader support.

Feature	Details
Keyboard	Arrow keys work in the input, buttons are keyboard accessible via Tab
Screen Reader	Input announces current value and constraints (min/max)
ARIA	Use aria-label on increment/decrement buttons for clarity
Min/Max	Buttons auto-disable at boundaries, preventing invalid values
Focus	Input receives focus ring, buttons show hover/focus states