# Form Components

Form components are typically associated with an attribute or field from the data source, except for the **Label** component, which is not data-bound.

The following sections describe:

* the types of components available in JMap Cloud Portal,
* the parameters specific to each component type,
* and the various features for managing components within a form.

## Component Types

**JMap Cloud Portal** offers a variety of **component types** to meet different functional and visual requirements within forms.

<table data-header-hidden><thead><tr><th width="158"></th><th></th></tr></thead><tbody><tr><td>Label</td><td>Static text to be displayed as is in the form.</td></tr><tr><td>Text</td><td>Input field for an alphanumeric value.<br>The associated attribute or field must be of type Text.</td></tr><tr><td>Number</td><td>Input field for a numeric value.<br>The associated attribute or field must be of type Number.</td></tr><tr><td>Boolean</td><td>Allows you to fill in the attribute or associated field for which there are only 2 possible values, true and false.</td></tr><tr><td>Date</td><td>Allows you to select a date.<br>The attribute or field must be of type Date.</td></tr><tr><td>List</td><td>List of values ​​from which, depending on the configured setting, only one value (single choice) or multiple values ​​(multiple choice) can be selected.<br>The associated attribute or field must be alphanumeric or numeric and must have a <a href="../../../connecting-data-data-sources/managing-data-sources/displaying-and-editing-data-source-information#value-domain">value domai</a>n that details the possible values that the attribute or field can take.</td></tr></tbody></table>

## Component Parameters

Each component type includes **specific parameters** that control its behavior and appearance (e.g., default text, formatting, style, constraints, etc.).

<table data-header-hidden><thead><tr><th width="168"></th><th></th></tr></thead><tbody><tr><td>Attribute</td><td>Select the <strong>layer attribute</strong> or <strong>table field</strong> that the component is associated with. This is the attribute or field that the form component will populate.</td></tr><tr><td>Title</td><td>Give the component a <strong>title</strong>.</td></tr><tr><td>Default value</td><td>Enter or select a <strong>default value</strong> to initialize the input field.</td></tr><tr><td>Choice</td><td><strong>List component</strong>.<br>Select the list type: single choice or multiple choice.</td></tr><tr><td>Display</td><td>Select the <strong>display type</strong> for the component in the form.<br>Text: Single line or Multiple line.<br>List: Radio button or Selection.<br>Boolean: Checkbox or Switch.<br>Number: Input field or Slider.</td></tr><tr><td>Value domain</td><td><strong>List component</strong>.<br>This section allows you to view the attribute's value domain. If you want to edit the values, click <strong>Show value domain</strong> to open the <a href="../../../connecting-data-data-sources/managing-data-sources/displaying-and-editing-data-source-information#attributes">data source attributes tab</a> interface. You can then edit the values.<br>If the attribute does not have a value domain, the <strong>Create value domain</strong> button appears, and when you click it, the <a href="../../../connecting-data-data-sources/managing-data-sources/displaying-and-editing-data-source-information#attributes">data source attributes</a> tab interface appears, allowing you to create the value domain.</td></tr><tr><td>Minimum</td><td><strong>Number component</strong>.<br>Enter the minimum value for the attribute.</td></tr><tr><td>Maximum</td><td><strong>Number component</strong>.<br>Enter the maximum value for the attribute.</td></tr><tr><td>Checked value</td><td><strong>Boolean component</strong>.<br>Specify the value to save when the box is checked or the switch is enabled.</td></tr><tr><td>Unchecked value</td><td><strong>Boolean component.</strong><br>Specify the value to save when the box is unchecked or the switch is disabled.</td></tr><tr><td>Status - Required</td><td>Determines whether the field is <strong>required</strong>.<br>The user will not be able to submit the form until all required fields are completed.<br>Required fields are marked with an asterisk (*) in the form designer.</td></tr><tr><td>Status - Read only</td><td>Enable this option to make the <strong>component read-only</strong>.<br>The user will not be able to edit the content.<br>This option should be used for a component with a default value.</td></tr></tbody></table>

## Working with Components

### **Adding a Component**

To add a component to a form, drag it from the palette and drop it into the **Design** tab interface. Components can be placed within [layout containers](https://docs.jmapcloud.io/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/creating-and-managing-data-forms/form-design/form-layout).

{% hint style="info" %}
By default, components are stacked vertically within the form.
{% endhint %}

### **Configuring a Component**

To configure a component already placed in the form, click on it in the **Design** tab. Its editable parameters will appear in the **Properties** section.

You can adjust the spatial arrangement of components using the layout tools described in the following section.

### **Deleting a Component**

To delete a component, click on it in the **Design** tab, then click the delete icon ![](https://3291879974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9n1KCuTyIKwSpZcPcC6l%2Fuploads%2FxuLOiAXOf7JIQIanxqwe%2Fstudio-style-delete.png?alt=media\&token=c984e6b1-4f26-459e-baaf-1eb3365ee514).