> For the complete documentation index, see [llms.txt](https://docs.premsoft.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.premsoft.de/en/plugins/product-configurator/admin-dashboard/elements-and-field-types.md). # Elements and field types A configurator consists of **elements** that you assemble into a form in the *Elements* tab. There are three groups: **input fields** (produce a value), **design elements** (display only) and **structure elements** (organise the layout). Structure elements are described separately under [Layout & repeaters](/en/plugins/product-configurator/admin-dashboard/layout-and-repeaters.md). {% hint style="info" %} **Version note:** The **input fields** are available in every version. **Design and structure elements** are part of the **Premium** version – in other versions they are shown in the type selection but disabled (see [Advanced & Premium version](/en/plugins/product-configurator/versions.md)). {% endhint %} ## Common settings Many fields share the same settings: * **Label:** the displayed field name (translatable). * **Technical identifier:** a unique key per configurator (e.g. `colour`). The value is stored under this name and can be addressed in [formulas](/en/plugins/product-configurator/admin-dashboard/formula.md) as `fields.colour`. * **Placeholder:** grey hint text in the empty field (translatable). * **Required field:** enforces an entry before adding to the cart. * **CSS class:** additional classes for custom styling. * **Status:** *Active*, *Disabled* (visible, not operable), *Read-only* or *Hidden*. * **Show in configurator / Show in checkout:** controls whether the field appears in the form or in the cart overview. In addition, every field has a **Conditions** tab (see [Conditional visibility](/en/plugins/product-configurator/admin-dashboard/conditional-logic.md)) and – for suitable types – an **Info** section for a help popover (text, image or video). ## Input fields | Field type | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Text field** | Single-line text, e.g. for names or engraving texts. | | **Number** | Numeric input with optional minimum, maximum and step. | | **Multiline text** | Larger text field for longer entries. | | **Select list (dropdown)** | Single choice from several options. Supports colour/image swatches. | | **Checkbox group** | Multiple choice – the customer can tick several options. | | **Radio buttons** | Single choice as a button/dot list. | | **Toggle** | On/off choice (yes/no). | | **Slider** | Value selection via slider with minimum, maximum and step. | | **Date** | Date selection with optional min/max date. | | **E-mail** | Text field with e-mail validation. | | **Phone** | Text field with phone number validation. | | **Interim result** | Not an input field, but a **calculated display value** (e.g. "Area: 1.50 m²") that updates live. It is filled via a [formula](/en/plugins/product-configurator/admin-dashboard/formula.md). | Select lists, checkbox groups and radio buttons have an **option editor** – more about this under [Options & swatches](/en/plugins/product-configurator/admin-dashboard/options-and-swatches.md). ## Design elements These elements produce no value but structure and explain the form: | Element | Description | | -------------------------------------------- | ------------------------------------------------------------------------ | | **Heading** | Highlights a section. | | **Divider** | A horizontal line between areas. | | **Spacer** | Adds vertical empty space. | | **Rich text** | Freely formatted HTML content (editor). | | **Explanation** | A formatted hint block. | | **Notice: success / info / warning / error** | Coloured notice boxes (green, blue, orange, red) for important messages. | ## The info popover For many input fields you can add extra information in the **Info** tab – as **text**, **image** or **video** (YouTube/Vimeo, privacy-friendly embedding). The position is selectable, e.g. below the label, left/right of the field or as an info icon that opens a small window. This way you provide guidance without overloading the form. > **Tip:** Keep labels short and use the info popover for explanations. This keeps your form tidy and reduces questions. --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.premsoft.de/en/plugins/product-configurator/admin-dashboard/elements-and-field-types.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.