Counter

A numeric stepper consisting of a decrement button, a number input, and an increment button. Supports configurable minimum/maximum bounds, step size, read-only mode, and five sizes. The input value can be typed directly or adjusted with the buttons. The value is synced with defaultValue whenever that prop changes.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | defaultValue | number | No | 0 | Initial numeric value. Re-syncs when the prop changes. | | minValue | number | No | -Infinity | Minimum allowed value. | | maxValue | number | No | Infinity | Maximum allowed value. | | step | number | No | 1 | Amount incremented or decremented per button press. | | disabled | boolean | No | false | Disables both buttons and the input. | | readOnly | boolean | No | false | Makes the input read-only (buttons still work). | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'md' | Controls the dimensions and font size of the control. | | buttonType | 'clear' \| 'outline' \| 'solid' | No | — | Visual style of the increment/decrement buttons. | | buttonColor | string | No | theme primary | Color applied to the buttons. | | onValueChange | (value: number) => void | No | — | Callback fired whenever the value changes. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. | | inputStyle | React.CSSProperties | No | — | Inline styles for the number input. | | buttonStyle | React.CSSProperties | No | — | Inline styles for both buttons. | | inputClassName | string | No | — | CSS class name for the input element. | | buttonClassName | string | No | — | CSS class name for both buttons. |

Usage

Basic

import Counter from '@/components/Counter';

export default function Example() {
  return (
    <Counter
      defaultValue={1}
      minValue={1}
      maxValue={10}
      onValueChange={(value) => console.log('Count:', value)}
    />
  );
}

Quantity selector with step

import Counter from '@/components/Counter';

export default function Example() {
  return (
    <Counter
      defaultValue={0}
      minValue={0}
      maxValue={100}
      step={5}
      size="lg"
      onValueChange={(value) => console.log('Quantity:', value)}
    />
  );
}