@n8d/htwoo-patterns/_patterns/atoms/input/input-number.md

hTWOo Patterns to setup custom style guide

---
title: Number Input
order: 12
---

# Number Input

A specialized input field for numeric data that includes increment and decrement controls.

## Overview

The number input provides a specialized field for numerical data entry, with built-in validation and increment/decrement controls. It helps ensure that only valid numerical data is entered.

## Usage

Number inputs should be used when:
* The input must be a numeric value
* A specific range of values is allowed
* Increment/decrement functionality is helpful
* Preventing non-numeric input is important

## Attributes

* `min` - Specifies the minimum value allowed
* `max` - Specifies the maximum value allowed
* `step` - Specifies the interval between valid values
* `value` - Sets the default value

## States

* **Default** - Normal state
* **Focus** - When the input has keyboard focus
* **Disabled** - When the input cannot be interacted with
* **Invalid** - When the input contains a value outside the allowed range

## SCSS

**Component Import**

**SCSS Partial Location**

## CSS Classes

* `.hoo-input-number` - Base number input class

## Accessibility

* Always associate with a `<label>` element
* Provide clear minimum and maximum values when applicable
* Ensure controls are usable with keyboard navigation
* When disabled, include `aria-disabled="true"`
* Consider adding `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes