QuantityButtonProps

type QuantityButtonProps = {
  aria-label?: string;
  defaultValue?: number;
  disabled?: boolean;
  id?: string;
  invalid?: boolean;
  max?: number;
  min?: number;
  minusButtonAriaLabel?: string;
  onValueChange?: (value: number) => void;
  plusButtonAriaLabel?: string;
  readOnly?: boolean;
  size?: ConditionalValue<"lg" | "sm">;
  step?: number;
  value?: number;
} & CustomThemePropsWithExclusions;

Type Declaration

Name	Type	Description
aria-label?	string	Accessible name for the quantity field. The visible label usually sits outside the component, in which case pass id instead and point a label at it.
defaultValue?	number	Starting quantity when the component manages its own value.
disabled?	boolean	Disables the field and both buttons
id?	string	Id for the quantity field, to pair with an external label.
invalid?	boolean	Renders the invalid appearance
max?	number	Highest quantity that can be reached. Defaults to 99. When the quantity equals max, the increase button is disabled.
min?	number	Lowest quantity that can be reached. Defaults to 0. When the quantity equals min, the decrease button is disabled.
minusButtonAriaLabel?	string	Aria label for the decrease button. Defaults to “decrease”
onValueChange()?	(value: number) => void	Called with the new quantity, whether it was typed or stepped with the buttons.
plusButtonAriaLabel?	string	Aria label for the increase button. Defaults to “increase”
readOnly?	boolean	Shows the quantity but does not allow changing it
size?	ConditionalValue<"lg" | "sm">	The size of the component, default is small (‘sm’)
step?	number	How much the buttons and arrow keys move the quantity. Defaults to 1.
value?	number	The current quantity. Pass with onValueChange for a controlled component.