diff --git a/.changeset/shy-buses-double.md b/.changeset/shy-buses-double.md
new file mode 100644
index 00000000..b2c30469
--- /dev/null
+++ b/.changeset/shy-buses-double.md
@@ -0,0 +1,5 @@
+---
+"@elixir-cloud/design": patch
+---
+
+add support for readonly attribute to ecc-utils-design-form fields. This allows users to make fields uneditable.
diff --git a/apps/documentation/pages/docs/design/components/form.mdx b/apps/documentation/pages/docs/design/components/form.mdx
index 0db29b68..a3460ade 100644
--- a/apps/documentation/pages/docs/design/components/form.mdx
+++ b/apps/documentation/pages/docs/design/components/form.mdx
@@ -79,24 +79,25 @@ This component is used to render a form with the given fields.
This property is used to render the fields in the form. Fields can be passed as the array of objects. Each object represents a field. The object can have the following properties.
-| Property | Required | Default | Type | Description |
-| ----------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| key | `true` | `null` | `string` | Unique key for the field. |
-| label | `true` | `null` | `string` | Label for the field. |
-| type | `false` | `text` | `text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group` | Type of the field. |
-| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically |
-| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. |
-| fieldOptions.default | `false` | `null` | `string, boolean` | Value of the field |
-| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` |
-| fieldOptions.tooltip | `false` | `null` | `string` | Tooltip or help-text that will render a popup when hovered over label of form field. |
-| fieldOptions.accept | `false` | `null` | `string` | A comma separated string that determines the types of files that fields of type `file` will accept. [Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept). Only applies to fields of type `file` |
-| fieldOptions.returnIfEmpty | `false` | `false` | `boolean` | Determines if the data from an empty input field will be returned in the form data when empty. |
-| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` |
-| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` |
-| arrayOptions.min | `false` | `null` | `number` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min |
-| groupOptions.collapsible | `false` | `null` | `number`
-| fileOptions.protocol | `false` | `native`| `string` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min |
-| fileOptions.tusOptions | `false` | `null` | `Object ({ endpoint: string })` | Determines if a field of type `group` will be collapsible |
+| Property | Required | Default | Type | Description |
+| ----------------------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| key | `true` | `null` | `string` | Unique key for the field. |
+| label | `true` | `null` | `string` | Label for the field. |
+| type | `false` | `text` | `text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group` | Type of the field. |
+| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically |
+| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. |
+| fieldOptions.readonly | `false` | `false` | `boolean` | Determines is the field will be editable |
+| fieldOptions.default | `false` | `null` | `string, boolean` | Value of the field |
+| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` |
+| fieldOptions.tooltip | `false` | `null` | `string` | Tooltip or help-text that will render a popup when hovered over label of form field. |
+| fieldOptions.accept | `false` | `null` | `string` | A comma separated string that determines the types of files that fields of type `file` will accept. [Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept). Only applies to fields of type `file` |
+| fieldOptions.returnIfEmpty | `false` | `false` | `boolean` | Determines if the data from an empty input field will be returned in the form data when empty. |
+| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` |
+| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` |
+| arrayOptions.min | `false` | `null` | `number` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min |
+| groupOptions.collapsible | `false` | `null` | `number` |
+| fileOptions.protocol | `false` | `native` | `string` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min |
+| fileOptions.tusOptions | `false` | `null` | `Object ({ endpoint: string })` | Determines if a field of type `group` will be collapsible |
## Events
diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts
index 0efe5030..1dd2df26 100644
--- a/packages/ecc-utils-design/src/components/form/form.ts
+++ b/packages/ecc-utils-design/src/components/form/form.ts
@@ -9,7 +9,7 @@ import "@shoelace-style/shoelace/dist/components/details/details.js";
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
import "@shoelace-style/shoelace/dist/components/select/select.js";
import "@shoelace-style/shoelace/dist/components/option/option.js";
-import _ from "lodash-es";
+import * as _ from "lodash-es";
import { hostStyles } from "../../styles/host.styles.js";
import formStyles from "./form.styles.js";
import { primitiveStylesheet } from "../../styles/primitive.styles.js";
@@ -41,6 +41,7 @@ export interface Field {
accept?: string;
returnIfEmpty?: boolean;
tooltip?: string;
+ readonly?: boolean;
};
selectOptions?: Array<{ label: string; value: string }>;
arrayOptions?: {
@@ -144,6 +145,7 @@ export default class EccUtilsDesignForm extends LitElement {
data-testid="form-switch"
label=${field.label}
?required=${field.fieldOptions?.required}
+ ?disabled=${field.fieldOptions?.readonly}
?checked=${_.get(this.form, path)}
@sl-change=${(e: Event) => {
const value = (e.target as HTMLInputElement).checked;
@@ -244,6 +246,7 @@ export default class EccUtilsDesignForm extends LitElement {
{
await this.handleTusFileUpload(e, field);
}}
@@ -268,6 +271,7 @@ export default class EccUtilsDesignForm extends LitElement {
data-label=${field.label}
data-testid="form-input-file"
accept=${field.fieldOptions?.accept || "*"}
+ ?disabled=${field.fieldOptions?.readonly}
?multiple=${field.fieldOptions?.multiple}
?required=${field.fieldOptions?.required}
@change=${async (e: Event) => {
@@ -313,6 +317,7 @@ export default class EccUtilsDesignForm extends LitElement {
{
const selectElement = e.target as HTMLSelectElement;
@@ -342,6 +347,7 @@ export default class EccUtilsDesignForm extends LitElement {
?required=${field.fieldOptions?.required}
value=${_.get(this.form, path)}
?password-toggle=${field.type === "password"}
+ ?disabled=${field.fieldOptions?.readonly}
@sl-input=${(e: Event) => {
const { value } = e.target as HTMLInputElement;
if (!value) {