diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
index 2b8a1e438a..faf37f3ad8 100644
--- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte
+++ b/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 @@
>
{
+ if (readonly) {
+ e.preventDefault()
+ }
+ }}
type="checkbox"
class="spectrum-Checkbox-input"
value={optionValue}
diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
index f7afc10bbc..fc99fafd40 100644
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/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 @@
>
{
+ if (readonly) {
+ e.preventDefault()
+ }
+ }}
bind:group={value}
value={getOptionValue(option)}
type="radio"
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6e175c44de..90c897139c 100644
--- a/packages/client/manifest.json
+++ b/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",
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 88e1ec5a8e..cb4879f86e 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/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}
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 3c229c0509..c01827471a 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/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}