CartInput

ReactProps

Github Storybook Markdown Copy for LLM

A numeric input with increment and decrement controls for managing item quantities in a cart.

Import

import { CartInput } from "@cfa/react-core";

Live Editor

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.

Description

Use the description prop to provide additional context below the input. When the field is invalid, the error message appears above the description.

Disabled

Use the isDisabled prop to prevent interaction with the input.

Validation

Use isInvalid with errorMessage for realtime validation. For native form validation on submit, pass errorMessage as a function and set validationBehavior="native".