Skip to content
Components

QuantityControl

A compact quantity control on Base UI NumberField: the quantity is a number field that Arrow Up/Down step by one, and the buttons repeat while held. Shows a trash icon when quantity is at minimum and onRemove is set, minus icon otherwise.

Usage

import { QuantityControl } from "@instruments/materia-ui/components/quantity-control";

Best practices

  • Pass onRemove when hitting the minimum should delete the item - the decrement button then swaps to a trash icon; without it, decrement just stops at min.

  • It's controlled - pass the current value and update it in onIncrement/onDecrement, which fire once per step for clicks, arrow keys and each repeat of a held button. Typing a number is not supported.

  • Tab focuses the quantity itself (the stepper buttons are skipped, as in any number field), announced by its label. In a list of lines, pass a label naming the item so each field is told apart.

Props

PropTypeDefaultDescription
labelstring | undefined"Quantity"

Accessible name of the quantity field, announced before its value. Name the item when a list holds several controls ("Quantity of Oak veneer").

disabledboolean | undefined

Whether the control is disabled

maxnumber | undefined

Maximum value (defaults to 99)

minnumber | undefined

Minimum value (defaults to 1)

onDecrement(required)() => void

Called when the value should go down by one (button, Arrow Down, or press-and-hold)

onIncrement(required)() => void

Called when the value should go up by one (button, Arrow Up, or press-and-hold)

onRemove(() => void) | undefined

Called when remove button is clicked (when value = min). If not provided, decrement stops at min.

radius"rounded" | "full" | undefined

Border radius style

testIdstring | undefined

Test ID for the quantity input

value(required)number

Current quantity value

Composition

Builds on

Button, ButtonGroup