## Import
```jsx
import { CartInput } from "@cfa/react-core";
```
## Live Editor
```jsx
function CartInputExample() {
const [quantity, setQuantity] = React.useState(1);
return ;
}
```
## Examples
### Color
The CartInput component supports two color variants: `primary` (default) and `secondary`.
```jsx
function CartInputColors() {
const [primaryQty, setPrimaryQty] = React.useState(2);
const [secondaryQty, setSecondaryQty] = React.useState(2);
return (
);
}
```
### Size
Control the size of the input using the `size` prop. Available sizes are `sm`, `md`, and `lg` (default).
```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. The description is hidden when the field is in an invalid state.
```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 |
| :--- | :--- | :--- | :--- |
| color | `"primary" \ | "secondary"` | `primary` | - |
| decrementAriaLabel | `string` | - | A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. |
| description | `string` | - | - |
| errorMessage | `string \ | ((validation: ValidationResult) => string)` | - | - |
| incrementAriaLabel | `string` | - | A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. |
| label | `string` | - | - |
| onRemove | `() => void` | - | - |
| size | `"sm" \ | "md" \ | "lg"` | `lg` | - |
| 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. |
| defaultValue | `number` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| form | `string` | - | The \`\