---
title: Reference - System form components
related:
- https://docs.kentico.com/13/developing-websites/form-builder-development.md
- https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components/filtering-form-components.md
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
This page lists all components that are available for the [form builder](https://docs.kentico.com/13/developing-websites/form-builder-development.md) by default in new installations of Xperience. For details on how to programmatically configure these components when used in the widget configuration dialog, or in the form builder, see [Assigning editing components to properties](https://docs.kentico.com/13/developing-websites/form-builder-development/assigning-editing-components-to-properties.md).
> **Tip:** In addition to the default system components, developers can [create custom components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md) for the form builder.
> **Info:** **Identifiers of system form components**
>
> You can access the identifiers of system form components in your code via the **IDENTIFIER** constant exposed by each form component class. For example, the identifier is required when using the [EditingComponent attribute](https://docs.kentico.com/13/developing-websites/form-builder-development/assigning-editing-components-to-properties.md) to set the editing interface for a property.
| Form component | Form component class | Type | Description |
| -------------------- | -------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Calendar | CalendarFormComponent | DateTime | Calendar component that allows users to select a single date.
The component is provided via the [Kentico.Xperience.CalendarComponent](https://www.nuget.org/packages/Kentico.Xperience.CalendarComponent) NuGet package. For more information, see the [Kentico Xperience 13 Calendar Form Component](https://github.com/Kentico/xperience-calendar-component) GitHub repository. |
| Checkbox | CheckBoxComponent | bool | Checkbox field that saves a boolean value (true for a selected checkbox, false for a cleared checkbox). |
| Consent agreement | ConsentAgreementComponent | GUID | Checkbox field that allows users to give agreements to with a pre-selected [consent](https://docs.kentico.com/13/configuring-xperience/data-protection/gdpr-compliance/creating-consents.md). Displays the selected consent's short text next to the checkbox. When a visitor selects the consent checkbox and submits the form, the system creates a corresponding consent agreement for the given [contact](https://docs.kentico.com/13/on-line-marketing-features/managing-your-on-line-marketing-features/contact-management/working-with-contacts.md) and stores the agreement's identifier (GUID) into the form field.
To learn more, see: [Working with consents](https://docs.kentico.com/13/configuring-xperience/data-protection/gdpr-compliance/working-with-consents.md) |
| Drop-down list | DropDownComponent | string | Drop-down selector offering multiple options. Only one option can be selected.
To learn how to configure options for this component programmatically, see [Configuring selector editing components](#configuring-selector-editing-components). |
| Email | EmailInputComponent | string | Input field for entering one or more email addresses. |
| File uploader | FileUploaderComponent | string | Field that allows users to submit a single file as part of the form data. The submitted files are stored on the file system and the corresponding form field stores the file's name.
The component can be further configured using existing system settings, see [Configuring the File uploader](#configuring-the-file-uploader) for more information. |
| Multiple choice | MultipleChoiceComponent | string | Selector offering options in the form of checkboxes. Multiple options can be selected at the same time.
To learn how to configure options for this component programmatically, see [Configuring selector editing components](#configuring-selector-editing-components). |
| Multi-Value Calendar | MultiCalendarFormComponent | string | Calendar component that allows users to select multiple dates or a range of dates.
The component is provided via the [Kentico.Xperience.CalendarComponent](https://www.nuget.org/packages/Kentico.Xperience.CalendarComponent) NuGet package. For more information, see the [Kentico Xperience 13 Calendar Form Component](https://github.com/Kentico/xperience-calendar-component). |
| Numeric input | IntInputComponent | int | Textbox input field for entering whole numbers. |
| Radio buttons | RadioButtonsComponent | string | Selector offering multiple options in the form of radio buttons. Only one option can be selected.
To learn how to configure options for this component programmatically, see [Configuring selector editing components](#configuring-selector-editing-components). |
| reCAPTCHA | RecaptchaComponent | string | A validation element based on [reCAPTCHA](https://www.google.com/recaptcha/), which allows forms to tell apart humans and computers. If the reCAPTCHA validation fails, the form cannot be submitted.
Supports the following reCAPTCHA versions:
**reCAPTCHA v2** – requires users to click a checkbox indicating they are not a robot. This either passes the user immediately or challenges them to validate whether or not they are human (using an additional image selection or audio test).
**reCAPTCHA v3** – provides frictionless validation without interrupting users. Calculates a score for every request between 0.0 (very likely a bot) and 1.0 (very likely a good interaction). Validation succeeds or fails based on a specified score threshold.
To learn how to set up the reCAPTCHA component for your site, see: [Configuring reCAPTCHA](#configuring-recaptcha) |
| Text area | TextAreaComponent | string | Input field that allows users to enter text into an area with adjustable size. |
| Text input | TextInputComponent | string | Textbox input field. |
| U.S. phone number | USPhoneComponent | string | Input field for a phone number in the standard US format, i.e. (132) 456-7890. |
> **Info:** The form components listed on this page are available for the form builder.
>
> For information about additional form (editing) components available for the properties of [page builder](https://docs.kentico.com/13/developing-websites/page-builder-development.md) components, see [Selectors for page builder components](https://docs.kentico.com/13/developing-websites/page-builder-development/selectors-for-page-builder-components.md).
## Configuring selector editing components
When using selector components as [editing components](https://docs.kentico.com/13/developing-websites/form-builder-development/assigning-editing-components-to-properties.md), configure the _DataSource_ property to define their options. You can either specify a list of values, or a semicolon-separated list of values and text. Each option needs to be entered on a separate line. For example:
```csharp
// Assigns a selector component to the SelectedOption property
[EditingComponent(DropDownComponent.IDENTIFIER)]
// Configures the list options available in the selector
[EditingComponentProperty(nameof(DropDownProperties.DataSource), "cz;Czech Republic\r\nusa;United States")]
public string SelectedOption { get; set; }
```
Alternatively, you can load the items from a dynamic data source. See [Using a dynamic data source with selector components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components/using-a-dynamic-data-source-with-selector-components.md) for more information.
> **Info:** If you want to include a semicolon in the value or text of the options, you also need to set a different separator for the values and text using the _DataSourceValueSeparator_ property. For example:
>
> ```csharp
>
> // Sets "." as the delimiter for the options
> [EditingComponentProperty(nameof(DropDownProperties.DataSourceValueSeparator), ".")]
>
> ```
## Configuring the File uploader
The following settings from the **Settings** application allow you to configure the behavior of the _File uploader_ form component:
- **System → Files → Custom form files folder** – sets a custom folder used to store files uploaded using the form component. See [Settings - Files](https://docs.kentico.com/13/configuring-xperience/managing-sites/configuring-settings-for-sites/settings-system/settings-files.md).
- **System → Files → Upload extensions** – allows you to specify a list of file extensions users are allowed to upload using the form component. See [Settings - Files](https://docs.kentico.com/13/configuring-xperience/managing-sites/configuring-settings-for-sites/settings-system/settings-files.md).
All files are automatically synchronized across the live site and administration projects using [web farm](https://docs.kentico.com/13/configuring-xperience/setting-up-web-farms/configuring-web-farm-servers.md) functionality. In cases where you expect large volumes of user data to be uploaded, or you wish to keep all files in a shared location to prevent needless duplication, it is beneficial to [map](https://docs.kentico.com/13/custom-development/working-with-physical-files-using-the-api/configuring-file-system-providers.md) the form files folder to a shared location.
The remainder of this sections details further configuration of the form component and corresponding system settings:
- [Limiting the maximum uploadable file size](#limiting-the-maximum-uploadable-file-size) – describes how to set the maximum allowed size of uploaded files.
- [Denial of service protection](#denial-of-service-protection) – describes measures the system employs as prevention against malicious attacks.
### Limiting the maximum uploadable file size
**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.
You can control the maximum file size of files uploaded using the form component via the **maxRequestLength** and **maxAllowedContentLength** attributes in the live site application's _web.config_ file. If both of these attributes are specified, the smaller value is prioritized. The component will automatically prevent people from uploading files larger than the specified limit via a JavaScript notification.
```csharp
```
If neither of the attributes is present in the application's _web.config_ file, the default upload limit is set to 4 MB.
> **Tip:** **Scoping the upload limitation to the File uploader component**
>
> If you do not wish to set the maximum request/content length globally for the entire application, you can scope the configuration to only affect the _File uploader_ component by using a location element with its path attribute set to the _Kentico.FormBuilder/FormFileUploader_ route. This ensures the size limitations apply only to files uploaded using the _File uploader_ component:
>
> ```csharp
>
>
> ...
>
>
> ```
**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.
You can control the maximum size of files uploaded via the file uploader form component by setting the **FormBuilderOptions.FileUploaderFileSizeLimit** option in your live site application's startup code. The component will automatically prevent people from uploading files larger than the specified limit and notify them using a JavaScript notification.
```csharp
using Kentico.Forms.Web.Mvc;
public void ConfigureServices(IServiceCollection services)
{
...
// Sets the maximum file size of files uploaded using the 'File uploader' form component to 100MB
// You can also load this value from any configuration source using the configuration provider pattern
services.Configure(options => options.FileUploaderFileSizeLimit = 1024 * 100);
}
```
If the option is not configured, the default upload limit is set to 30 MB.
### Denial of service protection
**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.
To expedite the form submission process, all files selected using the _File uploader_ component are immediately uploaded and stored in a dedicated folder for temporary file storage. This occurs independently of the form submission process. After the form is submitted, the system moves the corresponding file (currently selected in the _File uploader_ component) to the folder used to store form data on the server.
As a measure of protection against denial of service attacks, for example by repeatedly uploading large files without submitting the form, the system limits the size of the temporary folder used to store the uploaded files. The folder size limit, set to 500 MB by default, can be configured by adding the **CMSTemporaryUploadFilesFolderSizeLimit** key into the __ section of the MVC project's _web.config_ file. If the folder size limit is exceeded, the system prevents users from uploading additional files and logs an exception to the event log.
```xml
```
**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.
To expedite the form submission process, all files selected using the _File uploader_ component are immediately uploaded and stored in a dedicated folder for temporary file storage. This occurs independently of the form submission process. After the form is submitted, the system moves the corresponding file (currently selected in the _File uploader_ component) to the folder used to store form data on the server.
As a measure of protection against denial of service attacks, for example, by repeatedly uploading large files without submitting the form, the system limits the size of the temporary folder used to store the uploaded files. The folder size limit, set to 500 MB by default, can be configured by setting the **FormBuilderOptions.TemporaryUploadFilesFolderSizeLimit** option in your live site application's startup code. If the folder size limit is exceeded, the system prevents users from uploading additional files and logs an exception to the event log.
```csharp
using Kentico.Forms.Web.Mvc;
public void ConfigureServices(IServiceCollection services)
{
...
// Sets the temporary folder size limit to 1000MB
// You can also load this value from any configuration source using the configuration provider pattern
services.Configure(options => options.TemporaryUploadFilesFolderSizeLimit = 1000);
}
```
The system deletes the contents of the temporary folder once every two hours using the _Delete old temporary upload files_ [scheduled task](https://docs.kentico.com/13/configuring-xperience/scheduling-tasks.md). The task runs _only_ on the Xperience administration project, and the file deletions are synchronized back to the live site project using [web farm](https://docs.kentico.com/13/configuring-xperience/setting-up-web-farms/configuring-web-farm-servers.md) functionality. If you wish to modify this behavior, for example in cases where you expect higher volumes of form submissions containing large files, you can override the default two hour interval by configuring the **CMSDeleteTemporaryUploadFilesOlderThan** setting key in the __ section of the administration project's _web.config_ file.
```xml
```
## Configuring reCAPTCHA
You need to register your site to use the reCAPTCHA API and obtain a pair of API keys:
1. Go to and sign in with your Google account.
2. Select the **reCAPTCHA type** that you wish to use.
- For reCAPTCHA v2, choose the **"I'm not a robot" Checkbox** option.
3. Fill in all required details, including the domain where your site is running (the presentation domain of your live site).
4. Copy your **Site key** and **Secret key**.
Next, enter your site's reCAPTCHA API keys into Xperience:
1. Open the **Settings** application in the administration interface.
2. Navigate to the **Security & Membership → Protection** settings category.
3. Under **reCAPTCHA v2** or **reCAPTCHA v3** section, paste the API keys into the **Site key** and **Secret key** settings respectively.
4. When using reCAPTCHA v3, set the default **Score threshold** required for the validation to be successful. You can override the score threshold when adding the reCAPTCHA component to individual forms.
5. **Save** the settings.
> **Tip:** **Tip**: If you run multiple sites in your Xperience instance, you can switch between them using the **Site** selector and enter different API keys for each site.
With the API keys entered into the system, the **reCAPTCHA** form component now works in forms. When [composing forms](https://docs.kentico.com/13/managing-website-content/forms/composing-forms.md), the form builder interface allows users to configure additional properties for specific reCAPTCHA fields.
**reCAPTCHA v2**
- **Theme** – sets the appearance of the reCAPTCHA element (Light or Dark).
- **Size** – sets the size of the reCAPTCHA element (Normal or Compact).
- **Type** – sets the type of challenge used if the initial noCAPTCHA validation fails (Image or Audio).
**reCAPTCHA v3**
- **Score Threshold** – reCAPTCHA returns a score for every request between 0.0 (very likely a bot) and 1.0 (very likely a good interaction). This threshold determines the score that must be reached for the form validation to be successful. Set a higher value if you have issues with spam or bots, and a lower value if you wish to simplify accessibility for users.
> **Note:** If the validation fails for a user, there are no further challenges and form submission is not possible. In these cases, users can attempt to refresh the page again.
- **Theme** – sets the appearance of the reCAPTCHA badge (Light or Dark).
- **Badge Position** – _Bottom right_ and _Bottom left_ display the reCAPTCHA badge in the corresponding position at the bottom of the form. _Inline_ displays the reCAPTCHA badge as a standard field within the form.
### reCAPTCHA privacy and personal data handling
The reCAPTCHA API works by collecting hardware and software information, such as device and application data, and sending this data to Google for analysis. However, the reCAPTCHA form component is not integrated with the consent functionality in Xperience. If required, you need to display any required privacy information to site visitors and collect consents manually.
For users in the European Union, you must comply with Google's [EU User Consent Policy](https://www.google.com/about/company/user-consent-policy/).
### Using multiple reCAPTCHAs on the same page
The system does not support the use of multiple reCAPTCHA fields within the same form. You can have multiple different forms with a reCAPTCHA field on the same page.
### Customizing reCAPTCHA messages
If you wish to change the error messages that reCAPTCHA displays to users, create custom [resource strings](https://docs.kentico.com/13/multilingual-websites/setting-up-a-multilingual-user-interface/working-with-resource-strings.md) with the appropriate keys and enter the required text content as the translation values for specific cultures.
**Important**: The resource strings must be added to your live site application.
Use the following resource string keys for error messages related to basic verification:
- **recaptcha.error.missing-input-response** – displayed when a user does not provide the required input, for example when the validation checkbox is not clicked.
- **recaptcha.error.invalid-input-response** – displayed when the user's input is invalid or malformed.
You can also use the following resource string keys for other technical errors:
- **recaptcha.error.serverunavailable** – the reCAPTCHA server is unavailable.
- **recaptcha.error.bad-request** – the validation request is invalid or malformed.
- **recaptcha.error.invalidconfiguration** – the reCAPTCHA site and secret key settings are not configured in Xperience.
- **recaptcha.error.missing-input-secret** – the secret API key is missing.
- **recaptcha.error.invalid-input-secret** – the secret API key is invalid or malformed.
- **recaptcha.error.timeout-or-duplicate** – timeout or the same form contains multiple reCAPTCHA fields.