Add the ability to disable individual CheckboxListField and `RadioG…

…roupField` options (#2509)
vivid-planet · Sep 6, 2024 · 3e013b0 · 3e013b0
1 parent bc2d0be
commit 3e013b0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/.changeset/twenty-jars-divide.md 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
@@ -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
@@ -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>
             )}