---
title: "Form elements and their properties"
manual: "Form"
version: "main"
permalink: "https://docs.typo3.org/permalink/typo3/cms-form:form-elements@main"
source: "E/FormElements/Index.rst"
rendered: "2026-10-07T18:55:49+00:00"
---

# Form elements and their properties {#form-elements}

## Overview of form elements {#form-elements-overview-of-form-elements}

![Overview of all form elements included in the TYPO3 core. There may be fewer or different elements in your installation.](Images/form_elements_all.png)

## Form element settings {#form-elements-settings}

Most form elements have these 8 basic settings:

-   **Label**: Label of the element.
-   **Description**: Description of the element. Can be used to
    provide the user with more information about the expected input.
-   **Field visible**: Specify whether the element is displayed in the
    frontend. Clear the checkbox to hide the element. The form editor marks
    hidden elements with an overlay icon. See also the
    [rendering option enabled](https://docs.typo3.org/permalink/typo3/cms-form:concepts-variants-enabled-property@main).
-   **Placeholder**: Example of the expected content. Disappears with the user's
    input.
-   **Default value**: Preset value. Pre-entered by the system and does not
    disappear with the user's input.
-   **Mandatory field**: Specify whether the field is a mandatory field and thus
    must be filled in by the user.
-   **Custom error message**: Custom message that will be displayed to the user
    if the field is not filled in. If you don't provide a message, a default
    message is shown.
-   **Validators**: Validators are used to check the data entered in the
    field. The system displays error messages if there are errors.

<!-- TODO: no Markdown rendering for "versionadded" -->

The setting Field visible was added.

> [!WARNING]
> If a form element is a required field or validators fail, error
> messages are displayed by the browser. These error texts and formatting cannot be
> changed by editors or integrators as they are controlled
> by the browser/operating system.

## Basic form elements {#form-elements-basic-elements}

### Text {#form-elements-basic-elements-text}

A single-line text field, e.g. for entering short information such as name,
address, location. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main).

![Element 'Text' - preview in the frontend.](Images/form_elements_text_1.png)

![Settings for the 'Text' element.](Images/form_elements_text_2.png)

### Textarea {#form-elements-basic-elements-textarea}

A multi-line text field, e.g. for the free input of continuous text. This allows
the user to provide a short text such as a message. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main).

![Element 'Textarea' - preview in the frontend.](Images/form_elements_textarea_1.png)

![Settings for the 'Textarea' element.](Images/form_elements_textarea_2.png)

### Password {#form-elements-basic-elements-password}

A single-line text field for entering a password. The browser "hides" the text
input, i.e. the entered characters are not visible. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main).

![Element 'Password' - preview in the frontend.](Images/form_elements_password_1.png)

![Settings for the 'Password' element.](Images/form_elements_password_2.png)

### Special elements {#form-elements-special-elements}

Sometimes it is better to use special elements instead of simple text
elements. Mobile devices such as smartphones display on-screen keyboards. If you
use the "Email address" element the form field on the device will contain a
"@" character in a central position and a validator will be triggered
that checks for the input format "[firstname.lastname@example.org](mailto:firstname.lastname@example.org)".

### Email address {#form-elements-special-elements-email}

A single-line field for entering an email address. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). In addition, the field has an
`Email` validator (this is the only validator available for this form element).

![Element 'E-mail' - preview in the frontend.](Images/form_elements_email_1.png)

![Settings for the 'E-mail' element.](Images/form_elements_email_2.png)

### Telephone number {#form-elements-special-elements-telephone-number}

A single-line text field for entering a phone number. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main).

![Element 'Telephone' - preview in the frontend.](Images/form_elements_telephone_1.png)

![Settings for the 'Telephone' element.](Images/form_elements_telephone_2.png)

### URL {#form-elements-special-elements-url}

A single-line text field for entering a URL. A URL is typically an internet
address, such as that of your website. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main)

![Element 'URL' - preview in the frontend.](Images/form_elements_url_1.png)

![Settings for the 'URL' element.](Images/form_elements_url_2.png)

### Number {#form-elements-special-elements-number}

A single-line text field for entering a number. A user can increase and decrease
the number in preconfigured steps using visual controls in the browser.
This element has the [basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main).
By default, the field has a `Number` validator. Additional settings:

-   **Step**: Here you can enter a number that defines the step size. The step size
    is the amount by which a number is increased or decreased in the frontend.

![Element 'Number' - preview in the frontend.](Images/form_elements_number_1.png)

![Settings for the 'Number' element.](Images/form_elements_number_2.png)

### Date {#form-elements-special-elements-date}

A single-line text field for entering a date.
[Most modern browsers](https://caniuse.com/input-datetime) will also display a calendar from
which the user can select the date. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   **Frequency**: default value "1" means that the user can select every day.
-   **Default value**: Preset date. Select one of these options:

    -   **No value**: The field has no preset date.
    -   **Today**: The current date at the time the form is displayed.
    -   **Absolute date**: A fixed date that you select in a date picker.
    -   **Relative date**: A date relative to the current day. Select "past"
        or "future", enter an amount, and select days, weeks, months, or
        years.
    -   **Custom relative expression**: Enter any other relative date
        expression, for example "sunday next month".

    TYPO3 calculates relative dates when the form is displayed.

<!-- TODO: no Markdown rendering for "versionadded" -->

Previously, you had to type the Default value of the date element
as text.

![Element 'Date' - preview in the frontend.](Images/form_elements_date_1.png)

![Settings for the 'Date' element.](Images/form_elements_date_2.png)

## Select elements {#form-elements-select-elements}

Select elements (including checkboxes, radio buttons and selectboxes) do not
allow a user to enter text. Instead, they offer a predefined
number of choices, for example, salutation options.

> [!NOTE]
> Select elements behave differently to text fields if they are marked as
> "required".Checkboxes with multiple choices, for example, cannot be
> be required fields. This is not supported by the HTML standard.

### Checkbox {#form-elements-select-elements-checkbox}

A simple checkbox. This element has the [basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main).
You can format the **Label** in a rich text editor. You can use bold
and italic text and insert links, for example to your privacy policy.

<!-- TODO: no Markdown rendering for "versionadded" -->

![Element 'Checkbox' - preview in the frontend.](Images/form_elements_checkbox_1.png)

![Settings for the 'Checkbox' element.](Images/form_elements_checkbox_2.png)

### Single selectbox {#form-elements-select-elements-single-select}

An element to create a drop-down list. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   **First option**: Define the "empty option", i.e. the first element of the
    selectbox. You can use this to provide additional guidance for the user.
-   -   ****Choices**: A tool to insert and manage options.**

        -   **Label**: Name of the option.
        -   **Value**: Value of the option. The system automatically sets the
            "Value" to the "Label". You can leave it like this if you are
            unsure of what you are doing.
        -   **Selected**: Check this to pre-select an option in the frontend.
        -   **\[ + \]**: Adds a new line for a new option.

![Element 'Single select' - preview in the frontend.](Images/form_elements_singleSelect_1.png)

![Settings for the 'Single select' element.](Images/form_elements_singleSelect_2.png)

### Radio buttons {#form-elements-select-elements-radiobutton}

An element to display one or more radio buttons. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   -   ****Choices**: A tool to insert and manage the options.**

        -   **Label**: Name of the option.
        -   **Value**: Value of the option. The system automatically sets the
            "Value" to the "Label". You can leave it like this if you are
            unsure of what you are doing.
        -   **Selected**: Check this to pre-select an option in the frontend.
        -   **\[ + \]**: Adds a new line for a new option.

![Element 'Radio button' - preview in the frontend.](Images/form_elements_radioBtn_1.png)

![Settings for the 'Radio button' element.](Images/form_elements_radioBtn_2.png)

### Multi checkbox {#form-elements-select-elements-multi-checkbox}

An element to create one or more checkboxes. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   -   ****Choices**: A tool to insert and manage the options.**

        -   **Label**: Name of the option.
        -   **Value**: Value of the option. The system automatically sets the
            "Value" to the "Label". You can leave it like this if you are
            unsure of what you are doing.
        -   **Selected**: Check this to pre-select an option in the frontend.
        -   **\[ + \]**: Adds a new line for a new option.

![Element 'Multi checkbox' - preview in the frontend.](Images/form_elements_multiCheckbox_1.png)

![Settings for the 'Multi checkbox' element.](Images/form_elements_multiCheckbox_2.png)

> [!WARNING]
> **HTML** does not check that "required" fields are filled out. They
> are only checked after a form has been submitted.

### Multi select {#form-elements-select-elements-multi-select}

An element to create a multiple selection. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   **First option**: Define the "empty option", i.e. the first element of the
    select. You can use this to provide additional guidance for the user.
-   -   ****Choices**: A tool to insert and manage the options.**

        -   **Label**: Name of the option.
        -   **Value**: Value of the option. The system automatically sets the
            "Value" to the "Label". You can leave it like this if you are
            unsure of what you are doing.
        -   **Selected**: Check this to pre-select an option in the frontend.
        -   **\[ + \]**: Adds a new line for a new option.

![Element 'Multi select' - preview in the frontend.](Images/form_elements_multiSelect_1.png)

![Settings for the 'Multi select' element.](Images/form_elements_multiSelect_2.png)

### Country select {#form-elements-select-elements-country-select}

An element to create a country selectbox. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main) Additional settings:

-   **First option**: Define the "empty option", i.e. the first element of the
    select. You can use this to provide additional guidance for the user.
-   **Prioritized countries**: A multi-selection of country names, which should
    be listed as the top options in the form element.
-   **Only countries**: Restrict the countries to be rendered in the selection.
-   **Exclude countries**: Define which countries should not appear in the
    selection.

## Advanced elements {#form-elements-advanced-elements}

### File upload {#form-elements-advanced-elements-file-upload}

An element to upload a file to the **File > Filelist** module. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   **Allowed Mime Types**: Select the allowed file extensions a user is able to
    upload.
-   **Storage path for uploads**: Select the storage path in your TYPO3 installation.
    This is where the uploaded file will be saved.
-   **Allow multiple upload**: Check this to allow users to upload more
    than one file in this field.
-   **Allow removal of uploaded files**: Check this to show a "Remove"
    checkbox next to each uploaded file. Users can then remove a file before
    they submit the form.

To limit the number of uploaded files, add a
[validator for the number of files](https://docs.typo3.org/permalink/typo3/cms-form:validators-number-of-files@main).

<!-- TODO: no Markdown rendering for "versionadded" -->

The settings Allow multiple upload and
Allow removal of uploaded files were added.

![Element 'File upload' - preview in the frontend.](Images/form_elements_fileUpload_1.png)

![Settings for the 'File upload' element.](Images/form_elements_fileUpload_2.png)

> [!CAUTION]
> **Error**
>
> **Privacy issues**:
> Keep in mind that the storage path you choose may not be protected. The path may
> be indexed by your search and search engines. If you need to protect sensitive
> documents, contact your administrator to create a secure storage path.

### Hidden {#form-elements-advanced-elements-hidden}

A field that is not visible in the frontend. The form element is inside the red
rectangle in the image. Such a field might be needed for technical functionality,
e.g. to add hidden values to a form. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   **Value**: Here you can set a value for the element.

![Element 'Hidden' - preview in the frontend.](Images/form_elements_hidden_1.png)

![Settings for the 'Hidden' element.](Images/form_elements_hidden_2.png)

### Image upload {#form-elements-advanced-elements-image-upload}

An element to upload an image to **File > Filelist**. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Other settings:

-   **Allowed Mime Types**: Select the file extensions a user is allowed to
    upload.
-   **Storage path for uploads**: Select the storage path in your TYPO3 installation.
    This is where the uploaded file will be saved.
-   **Allow multiple upload**: Check this to allow users to upload more
    than one file in this field.
-   **Allow removal of uploaded files**: Check this to show a "Remove"
    checkbox next to each uploaded file. Users can then remove a file before
    they submit the form.

To limit the number of uploaded files, add a
[validator for the number of files](https://docs.typo3.org/permalink/typo3/cms-form:validators-number-of-files@main).

<!-- TODO: no Markdown rendering for "versionadded" -->

The settings Allow multiple upload and
Allow removal of uploaded files were added.

![Element 'Image upload' - preview in the frontend.](Images/form_elements_imageUpload_1.png)

![Settings for the 'Image upload' element.](Images/form_elements_imageUpload_2.png)

> [!CAUTION]
> **Error**
>
> **Privacy issues**:
> Keep in mind that the storage path you choose may not be protected. The path may
> be indexed by your search and search engines. If you need to protect sensitive
> documents, contact your administrator to create a secure storage path.

### Advanced password {#form-elements-advanced-elements-advanced-password}

The element is analogous to the `Password` form element. A single-line text
field is displayed for entering a password. The browser "hides" the text input,
i.e. the entered characters are not visible. Another field is displayed below it
so that the user has to repeat the password to prevent typing errors. This field
is useful for registration forms. This element has the
[basic settings](https://docs.typo3.org/permalink/typo3/cms-form:form-elements-settings@main). Additional settings:

-   **Confirmation label**: Label for the confirmation field.

![Element 'Advanced password' - preview in the frontend.](Images/form_elements_advancedPassword_1.png)

![Settings for the 'Advanced password' element.](Images/form_elements_advancedPassword_2.png)

### Static text {#form-elements-advanced-elements-static-text}

A field for static text. The text is output in the style of your website.
The settings for this element are:

-   **Header**: Heading for the element.
-   **Text**: Content for the element. You can format the text in a rich
    text editor. You can use bold and italic text, links, and bulleted or
    numbered lists.

<!-- TODO: no Markdown rendering for "versionchanged" -->

Previously, the text of the static text element could not be formatted.

![Element 'Static text' - preview in the frontend.](Images/form_elements_staticText_1.png)

![Settings for the 'Static text' element.](Images/form_elements_staticText_2.png)

### Content element {#form-elements-advanced-elements-content-element}

You can display any content elements that are on your website. The settings for
this element are:

-   **Content element uid**: ID of the content element you want to display. You can
    either enter the ID manually or select it via the page tree.
    To do this, click on the "Page content" button.
-   **\[ Page content \]**: Modal which displays the page tree. You can select
    a page and the content element.

![Element 'Content element' - preview in the frontend.](Images/form_elements_contentElement_1.png)

![Settings for the 'Content element' element.](Images/form_elements_contentElement_2.png)

## Container elements {#form-elements-container-elements}

Fieldset and grid elements are container elements that structure
your form in terms of content or visual appearance. Container elements can
be combined. For example, a fieldset can contain several grids.

### Fieldset {#form-elements-container-elements-fieldset}

This container groups form elements based on content. This is
important for screen readers and helps you to improve the accessibility of your form.
For example, in an "Address" fieldset you could have
street, house number, postal code and city form elements. The settings for
this element are:

-   **Field group name**: Heading for the field group, e.g. "Address".

![Element 'Fieldset' - preview in the frontend.](Images/form_elements_fieldset_1.png)

![Element 'Fieldset' - preview in the backend.](Images/form_elements_fieldset_2.png)

![Settings for the 'Fieldset' element.](Images/form_elements_fieldset_3.png)

### Grid {#form-elements-container-elements-grid}

Use this container element to place fields next to each other (create a visual structure).

**The additional settings apply to the content elements inside the grid**:

-   -   ****Configuration Grid Area**:**

        -   Areas: **xs** (Very small), **sm** (Small), **md** (Medium), **lg** (Large),
            **xl** (Extra large), **xxl** (Extra extra large).
        -   These are the "breakpoints". These are ranges of
            resolutions or adaptations to different screen sizes. Smartphones,
            for example, have a low resolution range (xs or sm) and desktop monitors
            have a high resolution range (lg, xl or xxl). Use this to
            abstractly control how many elements are displayed next to each other in
            which resolution.
-   -   ****Number of columns for grid area "xx"**:**

        -   Enter a number for the selected area.
        -   The number determines how much space the field takes up on the different
            screen sizes and therefore how many elements are displayed next to
            each other.

![Element 'Grid' - preview in the frontend.](Images/form_elements_grid_1.png)

![Element 'Grid' - preview in the backend.](Images/form_elements_grid_2.png)

![Settings for the 'Grid' element - Part 1.](Images/form_elements_grid_3.png)

![Settings for the 'Grid' element - Part 2.](Images/form_elements_grid_4.png)