EditableCounterField

EditableCounterField wraps CounterField (a numeric stepper with +/− buttons) in the editable pattern. In read mode the counter displays the current value but its buttons are disabled. Clicking the edit icon enables the stepper, allowing the user to increment or decrement the value. On save the number is persisted via API.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | value | number | Yes | 0 | Current numeric value. | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | label | string | No | — | Label shown above the counter. | | description | string | No | — | Helper text shown below the label. | | minValue | number | No | — | Minimum allowed value. | | maxValue | number | No | — | Maximum allowed value. | | step | number | No | — | Amount added or subtracted per button click. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Size variant for the counter buttons. | | buttonType | "clear" \| "outline" \| "solid" | No | "clear" | Visual style of the increment/decrement buttons. | | buttonColor | string | No | — | Custom color for the counter buttons. | | disabled | boolean | No | false | When true, the counter is permanently disabled regardless of edit mode. | | readOnly | boolean | No | false | When true, the counter value cannot be changed even in edit mode. | | apiBaseUrl | string | No | — | Base URL prepended to updatePath. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | onEditStart | () => void | No | — | Called when edit mode begins. | | onEditSuccess | (updatedValue: number, newFormData: any) => void | No | — | Called after successful save. | | onEditError | (error: any) => void | No | — | Called on API error; value is reverted. | | onEditCancel | () => void | No | — | Called when the user cancels; value is reverted. | | editIcon | string | No | "pencil" | Icon name for the edit button. | | saveIcon | string | No | "check" | Icon name for the save button. | | cancelIcon | string | No | "close" | Icon name for the cancel button. | | containerStyle | React.CSSProperties | No | — | Style for the outermost wrapper. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style for the description <p> element. |

Usage

Basic

import React, { useState } from 'react';
import EditableCounterField from '@/components/editable-fields/EditableCounterField';

export default function Example() {
  const [quantity, setQuantity] = useState(5);

  return (
    <EditableCounterField
      label="Quantity"
      name="quantity"
      value={quantity}
      minValue={1}
      maxValue={100}
      updatePath="/v1/order-items/9"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setQuantity(updated)}
    />
  );
}