> For the complete documentation index, see [llms.txt](https://docs.opencityitalia.it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti.md).

# I componenti

La piattaforma integra il progetto opensource Form.io

I componenti sono i mattoncini con cui costruiamo i servizi digitali. La UI dei componenti (la grafica e il comportamento) segue lo [UI kit di Designers Italia](https://github.com/italia/design-ui-kit).

Nei paragrafi successivi trovi un elenco dei campi più utilizzati durante la creazione o la modifica di un servizio digitale.

## Usare il service builder

Per procedere alla modifica del modulo di un servizio digitale, accedi alla scheda "Modulo".

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FGePwAHPp5z9vlvg2s7LX%2Fimage.png?alt=media&amp;token=c5db0321-8ac5-4e25-9f07-4f377d5e13f2" alt=""><figcaption></figcaption></figure>

In questa sezione, sulla sinistra, trovi un elenco di componenti che puoi utilizzare per modifiare il modulo del servizio.

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FbmGk8Nh6gofiBJy3xezX%2Fimage.png?alt=media&amp;token=d88a4475-801e-4811-81c5-aa8f052e18c9" alt=""><figcaption></figcaption></figure>

Per inserire un componente, trascinalo dall'elenco all'interno del modulo.

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FMJSWnRdcTM3vdlms82Q3%2FScreen%20recording%202025-05-22%2009.07.43.gif?alt=media&amp;token=482c142f-eb07-4329-b723-8f2983d6269b" alt=""><figcaption></figcaption></figure>

### Tipi di componenti

#### Componenti di layout

Organizzano e strutturano il modulo senza raccogliere dati direttamente. Li riconosci osservando come si comporta il modulo lato cittadino: le tab di navigazione, i pannelli che raggruppano i campi, le tabelle ripetibili e i testi informativi sono tutti generati da questi componenti.

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2Fa0rHbqtVpzuE1aDW6Ful%2Flayout-componenti-overview.png?alt=media&amp;token=614a5113-90ba-4722-818b-bcb69e02b80f" alt=""><figcaption></figcaption></figure>

1. **Page break** — separa il modulo in più pagine: genera le tab di navigazione in alto ed è visibile anche come componente autonomo in fondo al modulo;
2. **Elementi** — crea il pannello con titolo e descrizione che raggruppa i campi;
3. **HTML** — inserisce il testo informativo sopra la tabella;
4. &#x20;**Datagrid** — permette di ripetere più volte lo stesso gruppo di campi, qui i precedenti matrimoni.

Di seguito l'elenco completo dei componenti di layout che si utilizzano maggiormente:

* [Elementi](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/gli-elementi.md) — crea sezioni e contenitori per ordinare i campi;
* [Columns](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/i-columns.md) — dispone i campi su più colonne affiancate;
* [Datagrid ](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-datagrid.md)— permette di ripetere un insieme di campi più volte;
* [HTML](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/lhtml.md) — inserisce testo o contenuto statico nel modulo;
* [Page break](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-page-break.md) — inserisce un'interruzione di pagina nel PDF del modulo e genera le tab di navigazione nel modulo lato cittadino.

#### Componenti di raccolta dati

Raccolgono le informazioni inserite dal cittadino:

* [Textfield](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-textfield.md) — campo di testo libero;
* [Textarea](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/la-textarea.md) — area di testo libero;
* [Number](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-number.md) — campo numerico;
* [Select](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/la-select.md) — selezione da un elenco a discesa;
* [Select boxes e radio button ](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/impostare-le-scelte-utente-select-boxes-e-radio-button.md)— scelta singola o multipla tra opzioni predefinite;
* [Date ](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/le-date.md)— selezione di una data;
* [File SDC](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/inserire-allegati-il-file-sdc.md) — caricamento di allegati;
* [Address](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/geo-localizzare-una-pratica-il-componente-address.md) — inserimento e geo-localizzazione di un indirizzo;
* [Oggetto della pratica](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/loggetto-della-pratica.md) — imposta il titolo identificativo della pratica.

### Componenti standard

La creazione dei servizi avviene con un modello a componenti, basati su classi dati. Tutti i servizi possono utilizzare la libreria di componenti standard (*Nested form*), con i relativi vantaggi, tra cui la realizzazione del principio del *once only*.

### Componenti custom

Nonostante il vantaggio nell'utilizzo di componenti standard, la piattaforma consente di di creare facilmente componenti custom per raccogliere diversi tipi di dati, da riutilizzare eventualmente anche per altri servizi.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.