Skip to main content

NumberInput

NumberInput

Numeric input with increment/decrement controls

Tags: component form input

View Demo

NumberInput provides a numeric input field with stepper buttons for easy value adjustment.

Import​

<script>
  import { NumberInput } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  let quantity = $state(1);
</script>

<NumberInput bind:value={quantity} />

Props​

Prop Type Default Description
value number | null null Current value (bindable)
min number - Minimum allowed value
max number - Maximum allowed value
step number 1 Increment/decrement step
disabled boolean false Disables the input
readonly boolean false Makes input read-only
required boolean false Marks field as required
placeholder string - Placeholder text
name string - Name attribute for form submission
id string - Element ID (auto-generated if empty)
showStepper boolean true Show +/- stepper buttons
label string - Label text
hint string - Hint text below the input
error string - Error message
onValueChange (value: number | null) => void - Callback when value changes
class string - Additional CSS classes

Min/Max Values​

Set bounds for the input:

<NumberInput bind:value min={0} max={100} />

Step Size​

Control the increment amount:

<NumberInput bind:value step={5} />
<NumberInput bind:value step={0.1} />

With Label and Hint​

<NumberInput label="Quantity" hint="Enter the number of items" bind:value min={1} max={99} />

Validation​

<NumberInput label="Amount" bind:value min={1} error={value < 1 ? 'Minimum amount is 1' : ''} />

Without Stepper Buttons​

<NumberInput label="Price" bind:value showStepper={false} />

Examples​

Quantity Selector​

<NumberInput label="Quantity" bind:value={quantity} min={1} max={10} />

Price Input​

<NumberInput label="Price" bind:value={price} min={0} step={0.01} />

Age Input​

<NumberInput label="Age" bind:value={age} min={0} max={150} />

Accessibility​

  • Keyboard increment/decrement with Arrow keys
  • Buttons have appropriate ARIA labels
  • Auto-generated IDs link labels to inputs
  • aria-describedby connects hint and error messages
  • aria-invalid set when error is present
  • Screen reader announces required fields
  • Slider - Visual range selection
  • Input - General text input
On this page