## Import
```jsx
import { CartInput } from "@cfa/react-core";
```
## Live Editor
```jsx
function CartInputExample() {
const [quantity, setQuantity] = React.useState(1);
return ;
}
```
## Guidelines
### When to use
- CartInput is for cart and checkout line-item quantities, with increment, decrement, and optional remove.
### Do
- Let people type when they need a larger quantity.
- Include remove when dropping the line item from the cart.
- Always provide a visible label in sentence case. Placeholder text is not a label. Use placeholders only for optional format hints, never as the only label.
- Enforce min and max on stepper actions. Still allow typed values, then validate when people leave the field or submit the form, not on every keystroke.
### Avoid
- Decrementing to zero and leaving an empty row.
- Using CartInput for general numeric entry. Use NumberInput.
## Examples
### Size
Control the size of the input using the `size` prop. Available sizes are `sm`, `md` (default), and `lg`.
```jsx
function CartInputSizes() {
const [smQty, setSmQty] = React.useState(1);
const [mdQty, setMdQty] = React.useState(1);
const [lgQty, setLgQty] = React.useState(1);
return (
);
}
```
### Description
Use the `description` prop to provide additional context below the input. When the field is invalid, the error message appears above the description.
```jsx
function CartInputWithDescription() {
const [quantity, setQuantity] = React.useState(1);
return (
);
}
```
### Disabled
Use the `isDisabled` prop to prevent interaction with the input.
```jsx
function CartInputDisabled() {
return ;
}
```
### Validation
Use `isInvalid` with `errorMessage` for realtime validation. For native form validation on submit, pass `errorMessage` as a function and set `validationBehavior="native"`.
```jsx
function CartInputValidation() {
const [quantity, setQuantity] = React.useState(0);
return (
);
}
```
## Props
### CartInput
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| decrementAriaLabel | `string` | `"Decrease quantity"` | A custom aria-label for the decrement button. |
| description | `string` | - | Adds a description to the input. |
| errorMessage | `string \ | ((validation: ValidationResult) => string)` | - | Custom error message to display when the input is invalid. |
| incrementAriaLabel | `string` | `"Increase quantity"` | A custom aria-label for the increment button. |
| isRequired | `boolean` | `false` | Sets the input to a required state. |
| label | `string` | - | Adds label for the input. |
| minValue | `number` | `0` | The smallest value allowed for the input. |
| size | `"lg" \ | "md" \ | "sm"` | `md` | Size of the cart input controls. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| className | `ClassNameOrFunction` | `'react-aria-NumberField'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| commitBehavior | `"snap" \ | "validate"` | `'snap'` | Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step. |
| defaultValue | `number` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| form | `string` | - | The \`\