## Examples

### Default


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### With unit


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### With unit and lower threshold reached


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### With unit and upper threshold reached


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Disabled


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### With status


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Varying sizes


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

## 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. |