Number Input — ARC UI

Components

Number Input

input

interactive

<arc-number-input>

Overview

Guidelines

When to use

Use Number Input when the user needs to enter or adjust an exact numeric value
Set `min` and `max` to prevent invalid values and provide clear boundary feedback
Choose a `step` that matches your data precision -- 1 for integers, 0.1 for decimals
Provide a `label` so the input is properly announced by screen readers
Use the Shift+Arrow shortcut tip in help text for power users who need fast adjustments

When not to use

Do not use Number Input for approximate values or large ranges -- use Slider instead
Do not omit `min` and `max` when there are logical boundaries for the value
Do not set a `step` of 0 -- it prevents the buttons from changing the value
Do not use Number Input for non-numeric data like phone numbers -- use a standard Input with a pattern
Avoid stacking many number inputs without labels -- each one needs context for usability

Features

Inline decrement and increment buttons flanking a centred numeric text field
Automatic value clamping to `min` and `max` boundaries with buttons disabled at limits
Configurable `step` for increment granularity, with Shift+Arrow for 10x step multiplier
Focus-within styling applies accent-primary border and ring to the entire control group
Label rendered as uppercase accent-font text above the control with proper `for` association
Native `spinbutton` ARIA role with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`
Hides browser-native spin buttons for a clean cross-platform appearance
Disabled state at 40% opacity with pointer events blocked

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-number-input label="Quantity" value="3" min="1" max="99" step="1"></arc-number-input>

import { NumberInput } from '@arclux/arc-ui-react';

<NumberInput label="Quantity" value={3} min={1} max={99} step={1} />

<script setup>
import { NumberInput } from '@arclux/arc-ui-vue';
</script>

<template>
  <NumberInput label="Quantity" :value="3" :min="1" :max="99" :step="1" />
</template>

<script>
  import { NumberInput } from '@arclux/arc-ui-svelte';
</script>

<NumberInput label="Quantity" value={3} min={1} max={99} step={1} />

import { Component } from '@angular/core';
import { NumberInput } from '@arclux/arc-ui-angular';

@Component({
  imports: [NumberInput],
  template: `
    <NumberInput label="Quantity" [value]="3" [min]="1" [max]="99" [step]="1"></NumberInput>
  `,
})
export class MyComponent {}

import { NumberInput } from '@arclux/arc-ui-solid';

<NumberInput label="Quantity" value={3} min={1} max={99} step={1} />

import { NumberInput } from '@arclux/arc-ui-preact';

<NumberInput label="Quantity" value={3} min={1} max={99} step={1} />

API

Prop	Type	Default	Description
`value`	`number`	`0`	Current numeric value. Reflected as an attribute and updated on user interaction.
`min`	`number`	`undefined`	Minimum allowed value. The decrement button is disabled when the value reaches this limit.
`max`	`number`	`undefined`	Maximum allowed value. The increment button is disabled when the value reaches this limit.
`step`	`number`	`1`	Increment and decrement step size. Arrow keys use this value, Shift+Arrow uses 10x this value.
`label`	`string`	`''`	Label text displayed above the control in uppercase accent font.
`disabled`	`boolean`	`false`	Disables interaction, reducing opacity to 40% and blocking pointer events.

Events

Event	Description
`arc-change`	Fired when the numeric value changes via buttons or keyboard

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight