> For the complete documentation index, see [llms.txt](https://docs.jmapcloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jmapcloud.io/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/creating-forms/form-design/form-components.md).

# Form Components

Form components are generally associated with an attribute or field of the data source, with the exception of **Label** and **Attachments** components, which are not directly linked to data.

The following sections describe:

* The different types of available components.
* The parameters for each component type.
* The component management features within a form.

## Component Types

JMap Cloud Portal offers several component types to adapt forms to various functional and visual needs.

<table data-header-hidden><thead><tr><th width="150.2421875" valign="top">Component</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top">Label</td><td valign="top">Static text displayed as-is in the form.</td></tr><tr><td valign="top">Text</td><td valign="top"><p>Input field for an alphanumeric value. </p><p>The associated attribute/field must be of type Text.</p></td></tr><tr><td valign="top">Number</td><td valign="top"><p>Input field for a numeric value. </p><p>The associated attribute/field must be of type Number.</p></td></tr><tr><td valign="top">Boolean</td><td valign="top"><p>Used to populate the associated attribute/field for which only 2 possible values exist, corresponding to the checked and unchecked states of the component. </p><p>The associated attribute/field can be of type Text or Number.</p></td></tr><tr><td valign="top">Date</td><td valign="top"><p>Allows the user to select a date. </p><p>The associated attribute/field must be of type Date or DateTime.</p></td></tr><tr><td valign="top">List</td><td valign="top"><p>A list of values from which, depending on the configured parameter, either a single value (single choice) or multiple values (multiple choice) can be selected. </p><p>The associated attribute/field must be of type Text or Number and must have a <a href="/pages/oV6Ym3vaUSvqVdup4H5I#value-domain">value domain</a> that determines the possible values the attribute/field can take.</p></td></tr><tr><td valign="top">Attachment</td><td valign="top"><p>Allows a JMap NG application user to attach one or more files to a feature or record in the data source. See the <a href="/pages/WWwDeCdThcthSzXHVmhL">Data Source Attachments</a> section for details. </p><p>Only one Attachment component can be added to a form. </p><p>The data source must have a linking attribute/field selected, and it must be <strong>unique</strong> and <strong>non-null</strong>. </p><p><strong>Note:</strong> If the linking attribute/field is modified after attachments have been added, the attachments are detached from the features/records but are not deleted.</p></td></tr><tr><td valign="top">Table</td><td valign="top"><p>Allows a JMap NG application user to create and edit data from a table associated with a feature or record in the data source. </p><p>A <a href="/pages/18MOPXLef25YKbR5d4wI">relationship</a> must be configured between the data source and the table. <strong>If the table data is editable, you must configure a form for the table.</strong> </p><p><strong>Example:</strong> A point layer represents air quality monitoring stations. A table contains the pollutant measurements taken at each station on different dates. For each monitoring station, there can be 0, 1, or multiple measurements. </p><p>In the attribute form for the monitoring station layer, the Table component displays a table containing pollutant concentration data at different dates. Each row corresponds to a measurement of a pollutant on a given date.</p><p><img src="/files/HU6mAPFQ4iqXl1PdK53i" alt="" data-size="original"></p></td></tr></tbody></table>

## Component Parameters

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

<table data-header-hidden><thead><tr><th width="150.47265625" valign="top">Parameter</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top">Attribute</td><td valign="top">Select the layer attribute or table field to which the component is associated. This is the attribute or field that the form component will populate.</td></tr><tr><td valign="top">Title</td><td valign="top">Assign a title to the component.</td></tr><tr><td valign="top">Text</td><td valign="top"><p>Attachment and Label components. </p><p>Text of the label or of the form section that contains the attachments.</p></td></tr><tr><td valign="top">Define linking attribute</td><td valign="top"><p>Attachment component. </p><p>If not already done, click the button to open the data source configuration interface and define the linking attribute. If the linking attribute is already defined, this parameter is not displayed. </p><p>This attribute is used to associate attachments with features or records in the data source. It must be <strong>unique</strong> and <strong>non-null</strong>. </p><p><strong>Note:</strong> If the linking attribute is modified after attachments have been added, the attachments are detached from the features/records but are not deleted.</p></td></tr><tr><td valign="top">Default value</td><td valign="top"><p>Enter or select a <strong>default value</strong> to initialize the input field. </p><p>This option should be used for a component that has a default value.</p></td></tr><tr><td valign="top">Choice</td><td valign="top"><p>List component. </p><p>Select the list type: single choice or multiple choice.</p></td></tr><tr><td valign="top">Display</td><td valign="top"><p>Select the display type of the component in the form. </p><p><strong>Text</strong>: Single line or Multiple lines. </p><p><strong>List</strong>: Radio button or Selection. </p><p><strong>Boolean</strong>: Checkbox or Toggle. </p><p><strong>Number</strong>: Input field or Slider.</p></td></tr><tr><td valign="top">Value domain</td><td valign="top"><p>List component. </p><p>This section allows you to view the <a href="/pages/oV6Ym3vaUSvqVdup4H5I#value-domain">attribute's value domain</a>. </p><p>If you want to modify the values, click <strong>Show value domain</strong> to open the data source <strong>Attributes</strong> tab interface. You can then edit the values. </p><p>If the attribute has no value domain, a <strong>Create value domain</strong> button appears; clicking it opens the data source Attributes tab interface where you can create the value domain.</p></td></tr><tr><td valign="top">Minimum</td><td valign="top"><p>Number component. </p><p>Enter the minimum value for the attribute.</p></td></tr><tr><td valign="top">Maximum</td><td valign="top"><p>Number component. </p><p>Enter the maximum value for the attribute.</p></td></tr><tr><td valign="top">Checked value</td><td valign="top"><p>Boolean component. </p><p>Specify the value to record when the checkbox is checked or the toggle is enabled.</p></td></tr><tr><td valign="top">Unchecked value</td><td valign="top"><p>Boolean component. </p><p>Specify the value to record when the checkbox is unchecked or the toggle is disabled.</p></td></tr><tr><td valign="top">Status / Required</td><td valign="top"><p>Determines whether the field is required. </p><p>The user will not be able to submit the form until all required fields are filled in. </p><p>Required fields are identified by an asterisk (*) in the form designer.</p></td></tr><tr><td valign="top">Status / Read only</td><td valign="top"><p>Enable this option to set the component to <strong>read-only</strong> mode. </p><p>The user will not be able to modify the content.</p></td></tr><tr><td valign="top">Relationship</td><td valign="top"><p>Table component. </p><p>Select the relationship used to link the table to the data source. The relationship must be defined beforehand.</p></td></tr><tr><td valign="top">Visible attributes</td><td valign="top"><p>Table component. </p><p>Select the table attributes that will be visible in the form. If the table is editable, you must configure a form for the table to edit these attributes.</p></td></tr><tr><td valign="top">Sort by</td><td valign="top"><p>Table component. </p><p>Select the attribute used to sort table records in the form.</p></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 inserted into containers for [layout](/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/creating-forms/form-design/form-layout.md) purposes.

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

### Configuring a Component

To configure a component already placed in the form, click it in the **Design** tab. The editable parameters are displayed in the **Properties** section.

The spatial arrangement of components can be adjusted using the layout tools, described in the following section.

### Removing a Component

To remove a component, click it in the **Design** tab, then click <img src="/files/OQK5ObyOk0yVrLNtrq84" alt="" data-size="line">.
