EditableNumberField

EditableNumberField is an inline-editable numeric input. In read mode the value is shown in a disabled number field. Clicking the edit icon enables the input, letting the user change the number. Supports decimal places, min/max bounds, step increments, and optional prefix/suffix decorators. On save the value 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 input. | | description | string | No | — | Helper text shown below the label. | | placeholder | string | No | — | Placeholder shown when the input is empty. | | decimalPlaces | number | No | 0 | Number of decimal places allowed. Affects the calculated step if step is not set. | | min | number | No | — | Minimum allowed value. | | max | number | No | — | Maximum allowed value. | | step | number | No | — | Step increment. Defaults to 1/(10^decimalPlaces) when decimalPlaces > 0. | | prepend | string | No | — | Text displayed before the input (e.g. a currency symbol). | | append | string | No | — | Text displayed after the input (e.g. a unit like "kg"). | | 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. | | inputStyle | React.CSSProperties | No | — | Style for the <input> element. | | 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 EditableNumberField from '@/components/editable-fields/EditableNumberField';

export default function Example() {
  const [price, setPrice] = useState(99.99);

  return (
    <EditableNumberField
      label="Price"
      name="price"
      value={price}
      decimalPlaces={2}
      prepend="$"
      updatePath="/v1/products/7"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setPrice(updated)}
    />
  );
}

Integer with bounds

<EditableNumberField
  label="Stock"
  name="stock"
  value={stock}
  min={0}
  max={9999}
  updatePath="/v1/products/7"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setStock(updated)}
/>