From 3e013b05d400bc5af91dd3f6dc3af0aa2479bad3 Mon Sep 17 00:00:00 2001
From: Ricky James Smith <jamesricky@me.com>
Date: Fri, 6 Sep 2024 10:43:36 +0200
Subject: [PATCH] Add the ability to disable individual `CheckboxListField` and
 `RadioGroupField` options (#2509)

---
 .changeset/twenty-jars-divide.md              | 26 +++++++++++++++++++
 .../src/form/fields/CheckboxListField.tsx     |  2 ++
 .../admin/src/form/fields/RadioGroupField.tsx |  5 ++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/twenty-jars-divide.md

diff --git a/.changeset/twenty-jars-divide.md b/.changeset/twenty-jars-divide.md
new file mode 100644
index 0000000000..a645f5bae9
--- /dev/null
+++ b/.changeset/twenty-jars-divide.md
@@ -0,0 +1,26 @@
+---
+"@comet/admin": minor
+---
+
+Add the ability to disable individual `CheckboxListField` and `RadioGroupField` options
+
+```tsx
+const options = [
+    {
+        label: "Selectable",
+        value: "selectable",
+    },
+    {
+        label: "Disabled",
+        value: "disabled",
+        disabled: true,
+    },
+];
+
+const FormFields = () => (
+    <>
+        <CheckboxListField label="Checkbox List" name="checkboxList" options={options} />
+        <RadioGroupField label="Radio Group" name="radioGroup" fullWdth options={options} />
+    </>
+);
+```
diff --git a/packages/admin/admin/src/form/fields/CheckboxListField.tsx b/packages/admin/admin/src/form/fields/CheckboxListField.tsx
index 1034dc8823..c109212c70 100644
--- a/packages/admin/admin/src/form/fields/CheckboxListField.tsx
+++ b/packages/admin/admin/src/form/fields/CheckboxListField.tsx
@@ -6,6 +6,7 @@ import { Field, FieldProps } from "../Field";
 type CheckboxListFieldOption<Value extends string> = {
     label: ReactNode;
     value: Value;
+    disabled?: boolean;
 };
 
 export type CheckboxListFieldProps<Value extends string> = FieldProps<[Value], HTMLInputElement> & {
@@ -23,6 +24,7 @@ export const CheckboxListField = <Value extends string>({ options, layout = "row
                             key={option.value}
                             label={option.label}
                             value={option.value}
+                            disabled={option.disabled}
                             name={name}
                             onChange={(_, checked) => {
                                 if (checked) {
diff --git a/packages/admin/admin/src/form/fields/RadioGroupField.tsx b/packages/admin/admin/src/form/fields/RadioGroupField.tsx
index c7be840cba..187707bdf0 100644
--- a/packages/admin/admin/src/form/fields/RadioGroupField.tsx
+++ b/packages/admin/admin/src/form/fields/RadioGroupField.tsx
@@ -7,6 +7,7 @@ import { Field, FieldProps } from "../../form/Field";
 type RadioGroupFieldOption<Value extends string> = {
     label: ReactNode;
     value: Value;
+    disabled?: boolean;
 };
 
 export type RadioGroupFieldProps<Value extends string> = FieldProps<Value, HTMLInputElement> & {
@@ -19,8 +20,8 @@ export const RadioGroupField = <Value extends string>({ options, layout = "row",
         <Field<Value> {...restProps}>
             {({ input: { checked, value, onBlur, onFocus, ...restInput } }) => (
                 <RadioGroup {...restInput} row={layout === "row"}>
-                    {options.map(({ value, label }) => (
-                        <FormControlLabel key={value} label={label} value={value} control={<MuiRadio />} />
+                    {options.map(({ value, label, disabled }) => (
+                        <FormControlLabel key={value} label={label} value={value} disabled={disabled} control={<MuiRadio />} />
                     ))}
                 </RadioGroup>
             )}