EditableRadioField

EditableRadioField displays the currently selected option as a styled pill badge in read mode. Clicking the edit icon renders all options as selectable pill buttons. Supports a custom renderOption function for fully custom option rendering. On save the selected option 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 | string | Yes | "" | Value of the currently selected option. | | options | { label: string; value: string }[] | Yes | [] | Array of selectable options. | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | label | string | No | — | Label shown above the options. | | description | string | No | — | Helper text shown below the label. | | useCustomRender | boolean | No | false | When true, uses renderOption to render each option instead of the default pill button. | | renderOption | (option, isClickable?, index?, isActive?) => React.ReactNode | No | — | Custom renderer called for each option in edit mode and for the selected option in read 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: string, 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 EditableRadioField from '@/components/editable-fields/EditableRadioField';

const priorityOptions = [
  { label: 'Low', value: 'low' },
  { label: 'Medium', value: 'medium' },
  { label: 'High', value: 'high' },
];

export default function Example() {
  const [priority, setPriority] = useState('medium');

  return (
    <EditableRadioField
      label="Priority"
      name="priority"
      value={priority}
      options={priorityOptions}
      updatePath="/v1/tasks/20"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setPriority(updated)}
    />
  );
}

With custom option renderer

<EditableRadioField
  label="Status"
  name="status"
  value={status}
  options={statusOptions}
  updatePath="/v1/tasks/20"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  useCustomRender
  renderOption={(option, isClickable, index, isActive) => (
    <span style={{
      padding: '4px 12px',
      borderRadius: 20,
      background: isActive ? '#0046BF' : '#eee',
      color: isActive ? '#fff' : '#333',
      cursor: isClickable ? 'pointer' : 'default',
    }}>
      {option?.label}
    </span>
  )}
  onEditSuccess={(updated) => setStatus(updated)}
/>