# Number input · MIAN

A stepper: a numeric input between decrement and increment buttons. Respects min, max and step; hold to repeat.

- Id: `number-input` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/number-input
- Use for: quantity stepper, plus minus quantity, number of guests, cart quantity.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-number`: Wrapper.
- `[data-mn-step="-1" | "1"]`: The two buttons.

## Accessibility

- The input stays a native number input; ArrowUp and ArrowDown step it. The buttons are skipped by Tab to avoid three stops for one value.

## Examples

### Quantity

```html
<div class="mn-number">
  <button type="button" data-mn-step="-1" aria-label="Decrease"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button>
  <input type="number" value="1" min="1" max="10" aria-label="Quantity">
  <button type="button" data-mn-step="1" aria-label="Increase"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
```

### Decimal step

```html
<div class="mn-number">
  <button type="button" data-mn-step="-1" aria-label="Decrease"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button>
  <input type="number" value="1.5" min="0" max="5" step="0.25" aria-label="Weight in kilograms">
  <button type="button" data-mn-step="1" aria-label="Increase"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/number-input/source