EditableCheckboxGroupField

EditableCheckboxGroupField displays a group of checkboxes for multi-value selection. In read mode the selected values are shown as a summary. Clicking the edit icon renders the full checkbox group, allowing the user to toggle individual options. Supports a custom renderOption function for fully custom option rendering. On save the selected values array is persisted via API.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | selectedValues | (string \| number \| boolean)[] | Yes | — | Array of currently selected option values. | | options | { label: string; value: string \| number \| boolean }[] | Yes | — | Array of available options to display as checkboxes. | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | label | string | No | — | Label shown above the checkbox group. | | description | string | No | — | Helper text shown below the label. | | apiBaseUrl | string | No | — | Base URL prepended to updatePath. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | renderOption | (option, index, isChecked) => React.ReactNode | No | — | Custom renderer for each option. Receives the option object, its index, and whether it is currently checked. | | onEditStart | () => void | No | — | Called when edit mode begins. | | onEditSuccess | (updatedValue: any, 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. | | optionContainerStyle | React.CSSProperties | No | — | Style applied to each option row container. | | optionLabelStyle | React.CSSProperties | No | — | Style applied to each option label <span>. |

Usage

Basic

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

const roleOptions = [
  { label: 'Read', value: 'read' },
  { label: 'Write', value: 'write' },
  { label: 'Delete', value: 'delete' },
];

export default function Example() {
  const [permissions, setPermissions] = useState(['read']);

  return (
    <EditableCheckboxGroupField
      label="Permissions"
      name="permissions"
      selectedValues={permissions}
      options={roleOptions}
      updatePath="/v1/roles/5"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setPermissions(updated)}
    />
  );
}

With custom option renderer

<EditableCheckboxGroupField
  label="Features"
  name="features"
  selectedValues={features}
  options={featureOptions}
  updatePath="/v1/plans/3"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  renderOption={(option, index, isChecked) => (
    <div style={{ background: isChecked ? '#e0f7fa' : '#fff', padding: 8, borderRadius: 6 }}>
      {option.label}
    </div>
  )}
  onEditSuccess={(updated) => setFeatures(updated)}
/>