Number Field

Number Field is a native number input with optional step buttons inside one border and one focus ring. The buttons need a small script; the plain field does not.

Public web API

A root, a label, a control row holding the input and optional step buttons, and optional description and error text.

<div data-bitsy-number-field>
  <label for="seats">Seats</label>
  <div data-bitsy-number-field-control>
    <button data-bitsy-number-field-decrement type="button" tabindex="-1" aria-label="Decrease seats">−</button>
    <input id="seats" type="number" min="1" max="50" value="5" inputmode="numeric" />
    <button data-bitsy-number-field-increment type="button" tabindex="-1" aria-label="Increase seats">+</button>
  </div>
</div>

<script type="module">
  import { init } from "@bitsyui/bits/number-field/init";
  init();
</script>

Arrow keys step the native input, so the buttons use tabindex="-1". Give them names with aria-label.
Use native min, max, and step. The script disables a button at its limit.
Leave the buttons out when the script is not loaded. data-bitsy-size="sm" or "lg" goes on the root.

Sizes and states

Try the arrow keys and the buttons. The minimum field starts with its decrement button disabled.

Plain

Quantity

Up to 99 per order.

Step buttons

Seats

At the minimum

Guests

Small, decimal

Rate

Large

Items

Invalid

Limit

Enter a limit from 1 to 10.

Disabled

Seats

Read-only

Seats

Foundation versus Bit

Native number spinners are tiny and differ per engine. data-bitsy-number-field hides them, draws one shared border and focus ring, and lays out large step buttons at both ends. The plain field is CSS only. Use Text Field with inputmode="numeric" for identifiers such as ZIP codes.