- React
- HTML

## Examples

### Default

### With unit

### With unit and lower threshold reached

### With unit and upper threshold reached

### Disabled

### With status

### Varying sizes

## Documentation

### Accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`aria-label="Plus"`, `aria-label="Minus"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name for the outer plus/minus buttons. Required
`min` | `input[type="number"].pf-v6-c-form-control` | Provides an optional minimum value for the input.
`max` | `input[type="number"].pf-v6-c-form-control` | Provides an optional maximum value for the input.

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-number-input` | `<div>` | Initiates the number input component.
`.pf-v6-c-number-input__icon` | `<span>` | Initiates the number input icon.
`.pf-v6-c-number-input__unit` | `<span>` | Initiates the number input unit.
`.pf-m-status` | `.pf-v6-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. Required if a status icon may be shown, even if the icon is not currently shown.
`--pf-v6-c-number-input--c-form-control--width-chars` | `.pf-v6-c-number-input` | Specifies the number of characters to show in the input.

##
CSS variables