React Components

# Quantity

_**Quantity** is a component used to enter and modify a numeric value in a responsive and easy way_

## Overview

---

The **Quantity** component provides a user-friendly interface for selecting or entering numerical values.

It includes an **Input** field combined with increment and decrement **Buttons** to adjust the value easily.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Quantity</td></tr><tr><th scope="row">Also known as</th><td>Numeric, Number input, Amount</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=49-9160" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/quantity" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-form-elements-quantity--documentation" target="_blank">Previous major version <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2" data-ods="link" href="#">Form Guidelines</a></td></tr></tbody></table>

## Usage

---

**Quantity** is used to quickly adjust with a few clicks a numeric value within defined parameters.

Limits can be set as minimum or maximum value. In that case, the numeric value cannot exceed the defined boundaries.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use the Quantity component for small, incremental adjustments where users are likely to increase or decrease values with just a few clicks |
| - Always allow users to manually input a number directly into the field, not just through the increment/decrement buttons |
| - Set appropriate min/max limits to prevent invalid or unintended values |
| - Provide contextual labels or grouping when needed to clarify what the quantity refers to |

| ❌ Don't |
| --- |
| - Don't use the Quantity component for large numeric changes that would require excessive clicking. Prefer a freeform numeric input or slider in those cases |
| - Don't use the component outside of quantitative contexts: it should only be used to adjust measurable numeric values (e.g., quantity, amount) |

### Best Practices in Context

1.  **Quantity**
2.  **Decrement button**
3.  **Input field**
4.  **Increment button**

## Placement

---

**Quantity** can be used to let users easily change an amount of items, for example, or similar situations.

It should be used with numeric **Input** that are in a fairly narrow range.

## Behavior

---

**Quantity** numeric field can be edited directly by the user.

The user can also decrease or increase the value by clicking on the **Buttons**.

In case that limits have been set to minimum and maximum value, corresponding control will be disabled when this value has been reached.

Each item of the **Quantity** component can be focused; the whole component can be disabled at once.

## Navigation

---

### Focus Management

When the **Quantity** component is focused, focus is automatically set to the input if not disabled.

If the **Input** field is read-only, it can still receive focus but cannot be edited.

### General Keyboard Shortcuts

Pressing Tab moves focus forward the input field.

Pressing Shift + Tab moves focus backward through the interactive elements.

Pressing Arrow Up when focused in the Input field increases the value.

Pressing Arrow Down when focused in the Input field decreases the value.

## Accessibility

---

This component complies with the [Spinbutton WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/)

### Always provide an explicit label

Every **Quantity** must have a clear and explicit label to ensure that users (especially screen reader users) understand its purpose, using either **FormField** or a native label tag.

Number of CPUs:

```jsx
<FormField>
  <FormFieldLabel>
    Number of CPUs:  </FormFieldLabel>
  <Quantity
    max={10}
    min={0}
  >
    <QuantityControl>
      <QuantityInput />
    </QuantityControl>
  </Quantity>
</FormField>
```

Screen readers will announce the label and the quantity field.