EditableTextField

EditableTextField is an inline-editable single-line text field. In read mode the current value is displayed inside a disabled input. Clicking the edit icon activates the field, allowing the user to type a new value and confirm with save or discard with cancel. On save the new value is sent to a REST endpoint via PATCH/PUT.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | value | string | Yes | "" | Current value displayed in read mode and pre-filled in edit mode. | | updatePath | string | Yes | — | API endpoint path used to persist the change (e.g. "/v1/products/123"). | | label | string | No | — | Label shown above the input. | | description | string | No | — | Helper text shown below the label. | | placeholder | string | No | — | Placeholder text shown inside the input when empty. | | apiBaseUrl | string | No | — | Base URL prepended to updatePath when making the API request. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | onEditStart | () => void | No | — | Called when the user clicks the edit icon and edit mode begins. | | onEditSuccess | (updatedValue: string, newFormData: any) => void | No | — | Called after the API responds successfully with the saved value. | | onEditError | (error: any) => void | No | — | Called when the API request fails. The value is reverted. | | onEditCancel | () => void | No | — | Called when the user clicks the cancel icon. The 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 applied to the outermost wrapper div. | | inputStyle | React.CSSProperties | No | — | Style applied to the <input> element. | | labelStyle | React.CSSProperties | No | — | Style applied to the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style applied to the description <p> element. |

Usage

Basic

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

export default function Example() {
  const [username, setUsername] = useState('john.doe');

  return (
    <EditableTextField
      label="Username"
      name="username"
      value={username}
      updatePath="/v1/users/42"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setUsername(updated)}
    />
  );
}

With callbacks

<EditableTextField
  label="Email"
  name="email"
  value={email}
  updatePath="/v1/users/42"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditStart={() => console.log('editing started')}
  onEditSuccess={(updated, formData) => {
    setEmail(updated);
    showToast('Email updated successfully');
  }}
  onEditError={(err) => showToast('Failed to update email', 'error')}
  onEditCancel={() => console.log('edit cancelled')}
/>