# Common properties

> Every property shared by most elements, from identity and state to limits, validation, logic, actions, design, and data.

Source: https://ngxviewbuilder.io/creators/properties

Most elements share the same core properties. Element-specific properties are covered on each [element page](https://ngxviewbuilder.io/creators/elements/).

**Video lesson 4 (2:24):** [Common properties](https://www.youtube.com/watch?v=TrCpk9M5Ofo). The properties every element shares: finding a property, label vs name, placeholder, description, help tooltip, switching types, field states, length limits, autocomplete and input mode. Chapters: 0:00 Intro, 0:13 Finding properties, 0:28 Label and name, 0:47 Placeholder, description, tooltip, 1:07 Switching type, 1:21 Hidden, disabled, read only, 1:35 Limits, 2:02 Preview.

::: tip Finding a property
The properties sidebar has a **search box** (*Search in property list*): type part of a property name to filter. Every field also has a **help icon**: hover it for a short explanation with an example.
:::

## How the sidebar is organised

The properties sidebar groups an element's properties into collapsible categories. Only the categories the selected element has appear, in this order:

| Category | What it holds |
| --- | --- |
| **General** | Name, label, description, placeholder, field help tooltip, and the element's own content: a button's text, a card's title, an HTML element's markup. |
| **Restrictions** | Hidden, disabled, read only, required, and limits such as min and max, lengths, counts, and accepted files. |
| **Validators** | Validation rules, the required message, and strict options. |
| **Logic** | Visible if, disable if, require if, reset if, calculated values (expression), and the default value. |
| **Data** | Data source binding, response paths, and lazy loading. |
| **Options** | Option lists and how they are filtered and selected. |
| **Columns** | A table's columns and expanded-row columns. |
| **Events** | Actions run on clicks, value changes, and other triggers. |
| **Design** | Width per screen size, colors, icons, variants, padding, borders, backgrounds, and shadows. |
| **Behavior** | How an element works at runtime: paging, quick search, loading mode, initially visible, dismissible, and other element-specific switches. |
| **Texts** | The fixed texts an element shows besides its label, such as *Add row* and the delete confirmation. |

Plugins can add their own categories after these, such as **Documentation**.

The sections below go through the properties most elements share, grouped by what they do rather than by category. The category each one sits in is given in the tables above, and the search box finds any of them by name.

## Identity & content

| Property | What it does |
| --- | --- |
| **Name (code)** | Unique element code in the JSON structure. The element's value is stored under this key, and logic, data paths, and other elements reference it as `{name}`. Change with care. Example: `el1` or `personFirstName`. |
| **Label** | The main caption visible to the user. Keep it clear in business terms. |
| **Field help tooltip** | Help text shown next to the label as a tooltip, for explanations that should be available on demand but not always visible. |
| **Description** | Help text below the label, for longer explanations that should always be visible at runtime. |
| **Placeholder text** | Text shown while the field is empty. Use as an example or short hint, not as the only explanation. |
| **Title** / **Subtitle** | Main heading text and secondary text for elements with their own header (cards, page titles, panels). |
| **Text** | Main text for content-style elements (button caption, badge text…). |
| **Icon** | Picked from a list (your application's icons first, then the built-in ones), typed by name, or pasted as SVG markup. Used as a visual accent or a shorter way to present an action. |
| **Type** | Switches the element to a closely related type without recreating it (e.g. `text` → `number`), preserving shared properties. |

## State

| Property | What it does |
| --- | --- |
| **Hidden** | Element is completely hidden from the user (its value and logic still exist). |
| **Initially visible** | Whether the element is shown immediately when the form opens, before logic or user actions apply. |
| **Disabled** | Field is inactive; the user cannot change it. |
| **Read only** | Value is displayed but cannot be edited. |
| **Inherit parent state** | Element follows the read-only/disabled state of its parent container or page. Turn off to unlock one child inside a locked container. |
| **Ignore parent state** | Legacy compatibility field; use *Inherit parent state* instead. |
| **Status** | Legacy compatibility field; for new elements use the *Read only* checkbox. |

Static `Disabled`/`Hidden` are fixed choices. For state that depends on other fields, use the **logic** conditions below.

## Limits

| Property | What it does |
| --- | --- |
| **Min / Max length** | Character limits on text inputs. *Min length* means the field counts as filled/valid only from that many characters. |
| **Min / Max value** | Numeric or date/time boundaries (numbers, sliders, date pickers). |
| **Pattern** | Extra RegExp check on text values, for strict formats such as codes, registration numbers, identifiers. |
| **Max rows** | Row limit for dynamic tables/panels. The add button disables at the limit. |
| **Max files / Max file size (MB)** | Upload limits on file elements. |

## Validation

| Property | What it does |
| --- | --- |
| **Required** | Value must be filled before submit. Pair with a clear message. |
| **Required field message** | Error text shown when a required field is empty. Localise it on multilingual forms. |
| **Validators** | A list of extra rules: built-in (min/max, length, pattern, email) or a custom condition with its own error message. Each validator has **Type**, **Value**, **Error message**, **Condition** (error when true), and **Apply if** (optional guard). See [Validation](https://ngxviewbuilder.io/creators/validation). |
| **Strict options** | On choice elements: validates that the current value(s) still exist among the available options. |

## Logic

All conditions are expressions entered via **Edit code**; see [Expressions basics](https://ngxviewbuilder.io/creators/expressions).

| Property | Expects | What it does |
| --- | --- | --- |
| **Visible if** | true/false expression | Shows the element only while true. Example: `{el1} == "yes"` |
| **Disable if** | true/false expression | Disables while true. Example: `{el1} != "yes"` |
| **Require if** | true/false expression | Makes required while true. Example: `{el2} == 1` |
| **Read only if** | true/false expression | Locks editing while true. Example: `{status} == "locked"` |
| **Reset if** | true/false expression | Resets the value to *Default value* when the condition **becomes** true (fires on the transition). |
| **Expression** | any value | Calculates the element's value from other fields. Example: `{price} * {quantity}` |
| **Default value** | static value | Initial value on load and the value restored by *Reset if*. |

Details: [Conditional logic](https://ngxviewbuilder.io/creators/conditional-logic) and [Calculated values](https://ngxviewbuilder.io/creators/calculated-values).

## Actions

| Property | What it does |
| --- | --- |
| **Events** | The action list: click → navigate, click → dataSource, change → setValue, click → toast… Every field of the action editor is documented in [Events & actions](https://ngxviewbuilder.io/creators/events-actions). |

## Input & formatting (typed inputs)

| Property | What it does |
| --- | --- |
| **Autocomplete** | HTML `autocomplete` attribute, which lets the browser fill standard data. Example: `given-name`, `email`, `street-address`. |
| **Input mode** | HTML `inputmode` hint. Mobile browsers show a matching keyboard. Options: `text`, `email`, `numeric`, `decimal`, `search`, `tel`, `url`, browser default. |
| **Spellcheck** | Keep or disable the browser spell-checker on text fields. |
| **Input mask** | Mask template. Built-ins: date, date time, time, digits, phone, international phone, personal code, or `custom`. |
| **Mask pattern** | The custom mask: `#` digit, `A` letter, `*` letter or digit. Example: `####-##-##` or `+1 ##########`. |

## Design

| Property | What it does |
| --- | --- |
| **Width** | Field width in desktop/base mode, in `%`, `px`, or other CSS units. Example: `100%` or `320px`. |
| **Tablet width** | Width for tablet. Empty = falls back to the base width. |
| **Mobile width** | Width for mobile. Empty = falls back to tablet width, then base width. |
| **Fit content** | Shrink to content width instead of filling the row. |
| **Background color, padding, radius, shadow, border** | Available on visual/surface elements like panels, buttons, badges; see the element pages and [Layout](https://ngxviewbuilder.io/creators/layout). |

## Data

Select-style elements and data views have a **Data source** binding (section *Primary source*): which source to load, which response fields become option value/label, request parameters, and refresh rules. Dependent fields are supported through the parameter map and *Listen fields* (refresh paths). Every field of that editor is documented in [Data sources](https://ngxviewbuilder.io/creators/data-sources).