CounterField

CounterField wraps the Counter component inside a labeled container. It provides increment and decrement buttons with configurable size, color, style, step, minimum, and maximum values. Suitable for quantity selectors, rating inputs, or any integer-based numeric input.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | number | Yes | — | Current numeric value. | | onChange | (value: number) => void | No | — | Called with the new value when the counter changes. | | label | string | No | — | Label rendered above the counter. | | description | string | No | — | Helper text rendered below the container. | | disabled | boolean | No | — | Disables both increment and decrement buttons. | | readOnly | boolean | No | — | Makes the counter read-only (buttons are non-interactive). | | minValue | number | No | — | Minimum allowed value. | | maxValue | number | No | — | Maximum allowed value. | | step | number | No | — | Amount to increment or decrement per click. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | — | Size preset for the counter buttons. | | buttonType | 'clear' \| 'outline' \| 'solid' | No | 'clear' | Visual style of the increment/decrement buttons. | | buttonColor | string | No | themeColors.primary | Color applied to the buttons. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the root container. | | id | string | No | — | id attribute on the root container. |

Usage

Basic

import React, { useState } from 'react';
import CounterField from '@/components/fields/CounterField';

export default function Example() {
  const [qty, setQty] = useState(1);

  return (
    <CounterField
      label="Quantity"
      value={qty}
      onChange={setQty}
      minValue={1}
      maxValue={99}
    />
  );
}

With step and solid buttons

<CounterField
  label="Rating (0–10)"
  value={rating}
  onChange={setRating}
  minValue={0}
  maxValue={10}
  step={1}
  buttonType="solid"
  size="lg"
/>