---
title: Assigning editing components to properties
related:
  - https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md
  - https://docs.kentico.com/13/developing-websites/form-builder-development/reference-system-form-components.md
  - https://docs.kentico.com/13/developing-websites/page-builder-development/selectors-for-page-builder-components.md
  - https://docs.kentico.com/13/developing-websites/form-builder-development/adding-visibility-conditions-for-builder-component-properties.md
  - https://docs.kentico.com/13/developing-websites/form-builder-development/configuring-editing-component-state-in-builder-configuration-dialogs.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).

When developing [page builder](https://docs.kentico.com/13/developing-websites/page-builder-development.md) or [form builder](https://docs.kentico.com/13/developing-websites/form-builder-development.md) components, you can define properties that allow content editors to adjust the component's appearance or behavior directly in the administration interface. Such properties are edited through a configuration dialog or properties panel (in the form builder). The editing interface for each property is provided by a [form component](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md) and is fully customizable.

> **Info:** Form components acting in this capacity are referred to as _**editing components**_ in the documentation.

Editing components are used in the configuration dialogs or panels for the properties of the following builder components:

- Page builder

  - [Widgets](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets/defining-widget-properties.md)
  - [Sections](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-page-builder-sections/defining-section-properties.md)
  - [Page templates](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-page-templates/defining-page-template-properties.md)
  - [Personalization condition types](https://docs.kentico.com/13/on-line-marketing-features/configuring-and-customizing-your-on-line-marketing-features/content-personalization/developing-personalization-condition-types.md)
- Form builder
  - [Form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components/defining-form-component-properties.md)
  - [Form sections](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts/defining-form-section-properties.md)
  - [Form field validation rules](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-validation-rules.md)
  - [Form field visibility conditions](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-visibility-conditions.md)

## Assigning and configuring editing components

To expose a page or form builder component's property for editing in the corresponding configuration interface, edit the component's property class (properties model), and annotate the appropriate properties using the **EditingComponent** attribute (available in the _Kentico.Forms.Web.Mvc_ namespace).

The _EditingComponent_ attribute assigns a form component to provide an editing interface for the annotated property. The attribute takes the _string_ identifier of a form component as its argument.

The following example shows the declaration of a property that has the _TextInputComponent_ form component assigned as its editing component.

```csharp

        // Assigns the 'TextInputComponent' as the editing component of the 'CustomProperty' property
        [EditingComponent(TextInputComponent.IDENTIFIER)]
        public string CustomProperty { get; set; }


```

> **Note:** The data type (i.e., _string, decimal,_ etc.) of the editing component must correspond to the data type of the property being annotated.

The property now becomes visible in the component's property configuration dialog or in the properties panel in the [form builder interface](https://docs.kentico.com/13/managing-website-content/forms/composing-forms.md) (for form builder components).

![Property configuration dialog of a widget, with a property exposed via an editing component](https://docs.kentico.com/docsassets/13/assigning-editing-components-to-properties/EditingComponent_Config_Dialog.png "Property configuration dialog of a widget, with a property exposed via an editing component")

### Available form components

To learn about the form components that the system provides by default, see:

- [Reference - System form components](https://docs.kentico.com/13/developing-websites/form-builder-development/reference-system-form-components.md)
- [Selectors for page builder components](https://docs.kentico.com/13/developing-websites/page-builder-development/selectors-for-page-builder-components.md)
- [Rich text editor for builder components](https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-rich-text-editor-for-page-builder.md)

Identifiers of system form components are contained in the **IDENTIFIER** constant, available in the given form component classes.

Additionally, you can develop [custom form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md) for any required scenarios.

### Configuring editing component properties

All form components provide several system properties, which you can set to adjust the resulting property configuration interface. The _EditingComponent_ attribute has optional constructor parameters that provide a shorthand for configuring these properties:

- **Label** – the label text displayed in the property's configuration interface. Can be localized by setting the value to an expression in format: _{$key$}_. Replace "key" with the key of a [resource string](https://docs.kentico.com/13/multilingual-websites/setting-up-a-multilingual-user-interface/working-with-resource-strings.md).
- **DefaultValue** – the default value of the property's input field.
- **Tooltip** – text displayed for the property on mouse hover. Can be localized by setting the value to an expression in format: _{$key$}_
- **ExplanationText** – a short message displayed under the property's input field. Can be localized by setting the value to an expression in format: _{$key$}_
- **Order** – the order in which the properties appear in the editing interface.

By default, form components designated as _editing components_ use the initial default values of their properties.

Individual form components also have their own properties, which you can configure for editing components by adding the **EditingComponentProperty** attribute with the following parameters:

- _PropertyName_ – a _string_ matching the name of the form component property that you wish to set (you can use the [nameof](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/operators/nameof) expression).
- _PropertyValue_ – a value to assign to the property. For properties with text values, you can set localized values through expressions in format: _{$key$}_

The following sample code demonstrates how to set an editing component's property:

```csharp

        // Enables the 'ACustomProperty' property for editing via the properties panel and assigns 'CustomFormComponent' as its editing component
        [EditingComponent("CustomFormComponent")]
        // Sets the editing component's 'MyProperty' property to '10'
        [EditingComponentProperty("MyProperty", 10)]
        // Sets the editing component's 'CustomProperty' to a localized value using the 'customproperty.value' resource string
        [EditingComponentProperty("CustomProperty", "{$customproperty.value$}")]
        public string ACustomProperty { get; set; }


```

### Framework data annotation attributes

You can use data attributes provided by the .NET framework in the [System.ComponentModel.DataAnnotations](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations) namespace to annotate properties. For example, to set a property as required, annotate it with the _Required_ attribute:

```csharp

        // Assigns the 'IntInputComponent' as the editing component of the 'MyProperty' property and configures its system properties
        [EditingComponent(IntInputComponent.IDENTIFIER, ExplanationText = "Please enter a number", Label = "Custom property", Tooltip = "Stores a numeric value.", Order = 0)]
        [Required]
        public int MyProperty { get; set; }


```

### Adding visibility conditions for properties

You can add dynamic visibility conditions that restrict how and when properties are displayed in the configuration dialog or panel.

For more information, see: [Adding visibility conditions for builder component properties](https://docs.kentico.com/13/developing-websites/form-builder-development/adding-visibility-conditions-for-builder-component-properties.md)

### Configuring editing component state

You can completely take over the editing component configuration logic (editing component property values, visibility conditions) via component configurators. Configurators are custom classes that give you access to an instance of the editing component and allow you to configure all of its aspects.

For more information, see: [Configuring editing component state in builder configuration dialogs](https://docs.kentico.com/13/developing-websites/form-builder-development/configuring-editing-component-state-in-builder-configuration-dialogs.md)