Pickers readonly prop

packages/bbui/src/Form/Core/CheckboxGroup.svelte

@@ -8,6 +8,7 @@
   export let options = []
   export let error = null
   export let disabled = false
+  export let readonly = false
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
@@ -40,6 +41,11 @@
         >
           <input
             on:change={onChange}
+            on:click={e => {
+              if (readonly) {
+                e.preventDefault()
+              }
+            }}
             type="checkbox"
             class="spectrum-Checkbox-input"
             value={optionValue}

packages/bbui/src/Form/Core/RadioGroup.svelte

@@ -8,6 +8,7 @@
   export let options = []
   export let error = null
   export let disabled = false
+  export let readonly = false
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionTitle = option => option
@@ -43,6 +44,11 @@
       >
         <input
           on:change={onChange}
+          on:click={e => {
+            if (readonly) {
+              e.preventDefault()
+            }
+          }}
           bind:group={value}
           value={getOptionValue(option)}
           type="radio"

packages/client/manifest.json

@@ -3071,6 +3071,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "select",
         "label": "Options source",
@@ -3196,6 +3207,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "select",
         "label": "Type",

packages/client/src/components/app/forms/MultiFieldSelect.svelte

@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let validation
   export let defaultValue
   export let optionsSource = "schema"
@@ -71,6 +72,7 @@
         getOptionValue={flatOptions ? x => x : x => x.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         on:change={handleChange}
         {placeholder}
         {options}
@@ -81,6 +83,7 @@
         value={fieldState.value || []}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         {options}
         {direction}

packages/client/src/components/app/forms/OptionsField.svelte

@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let optionsType = "select"
   export let validation
   export let defaultValue
@@ -58,6 +59,7 @@
         value={fieldState.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         {options}
         {placeholder}
@@ -72,6 +74,7 @@
         value={fieldState.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         {options}
         {direction}