---
title: "Screen Control Best Practices"
slug: "form-type-screens-best-practices"
updated: 2026-06-03T17:58:02Z
published: 2026-06-03T17:58:02Z
canonical: "documentation.decisions.com/form-type-screens-best-practices"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Screen Control Best Practices

Follow basic control settings best practices so [Screen Controls](/v1/docs/screen-controls) are easy to navigate and read.

> [!NOTE]
> Use [Multicolumn / Table](/v1/docs/multicolumn-table-control) controls to organize the layout and width of other controls.

For each example, click the **Bad Practice** and **Good Practice** expandable sections to compare what to avoid and what to follow. Recommendations are grouped by controls to simplify navigation.

---

## All Controls

### Label Text

**Bad Practice**

Avoid text redundancy as shown in the example below.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/f7335cce-3ae6-4e15-a67f-2c8ae3635775.png)

**Good Practice**

Be as concise as possible in control labels.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/905e467d-d055-4144-91f8-5b93b62feeb1.png)

### Help Text

**Bad Practice**

By providing no user guidance for information to enter into the form, users become confused.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image(79).png)

**Good Practice**

Use helper text to provide context how to interact with each control.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/44dc0d43-b04e-4e34-9740-2bbedf894f17.png)

---

## Line Inputs

### Display Field Information

**Bad Practice**

Avoid using [placeholders](/v1/docs/line-input-control#configuration-panel-settings) for [Line Input controls](/v1/docs/line-input-control). When users start typing in the controls, the placeholders disappear.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/fa5d371c-d931-49e3-849c-f848361c8485.png)

**Good Practice**

Use labels in controls to indicate their purpose, since they are always visible for users to see.

See the **Label** setting for the [Line Input control](/v1/docs/line-input-control) for more information.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/667245d9-77fd-4e3a-a919-b6cd92ea3d38.png)

### Organize Fields

**Bad Practice**

When a user navigates through a multi-column Screen, making the user follow a Z-pattern is more difficult for the user's eyes. Users might not even know where to start.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/9159fd7f-c321-49fc-a5b6-dcfe99f442c9.png)

**Good Practice**

If the [Line Input](/v1/docs/line-input-control) controls associate with one another, place them in one horizontal line.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/772de4ca-9af2-43fa-aef6-a54a3e1232f8.png)

### Masked Patterns

**Bad Practice**

Unmasked Line Input controls allow users to introduce errors when entering commonly-used information.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/63acdee9-4fd7-4637-b966-a0b981ce8a28.png)

**Good Practice**

Use masking patterns to pre-format commonly used information, thereby allowing users to enter information accurately. See the Custom Format String setting for the [Line Input](/v1/docs/line-input-control) control for more information. Click the image below to enlarge.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/BadPractice_Masks_02(2).gif)

---

## Select Lists

### Controls as Drop-Down Menus

**Bad Practice**

If there are fewer than four options, as a general guideline do not put them in a [Select List](/v1/docs/select-list-control) control as drop-down options. This design requires the user to click twice to commit an action: once to display the Select List control options, another select an option.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/e01a8291-ec6c-4c6a-9c79-2494ee067423.png)

**Good Practice**

If there are fewer than four options, show the options immediately using [Submit Button](/control-descriptions/submit-button-control-settings-1) controls. This design requires one click to commit an action.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/492baffb-c597-4d17-81be-fe0e31f695cd.png)

---

## Rich Texts

### Group Fields

**Bad Practice**

If your form is large, do not use all [Line Input controls](/v1/docs/line-input-control) in one section.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/cee503bd-3e45-4b31-83a6-1bdb79e41a62.png)

**Good Practice**

Use the [Rich Text](/v1/docs/rich-text-control) control to add headings that break the form into logically-related groups.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/0cb2dc10-a3ca-431d-baa6-f78ee60da3be.png)

### Custom CSS

**Bad Practice**

- When designing [Email Screens](/v1/docs/screens-types#email-screens), avoid relying on general HTML tag selectors (e.g., `p { color: red; }`) in your CSS. Many email clients—like Gmail or Outlook—strip or override these styles for security and rendering consistency.
- Avoid general tag-based selectors (`body`, `div`, `p`, etc.) which are often ignored or overwritten.

**Good Practice**

- Use **inline CSS** on HTML elements (e.g., `&lt;p style="color:blue;"&gt;`).
- Use **custom class selectors** and apply them directly to your elements.

```xml
<style>
  .custom-title {
    color: white;
    font-size: 22px;
    background-color: #065c9d;
    padding: 10px;
    border-radius: 4px;
  }
</style>

<p class="custom-title">Transfer Credit Evaluation</p>
```

**Why this matters**: Email clients sanitize content aggressively. Using inline styles or defined classes helps ensure your formatting remains consistent across platforms.

---

## Record Lists

### Controls in Script

**Bad Practice**

Entering the following Script code for a Record List control without Row IDs does not work as expected such as allowing to edit, delete, or add records.

```plaintext
"form_record_list_1": [
    {
      "first_name": "testfirst",
      "last_name": "testlast"
    }
]
```

**Good Practice**

When initializing a variable for a Record List control in a Script code using a Calculated Property, it is essential to ensure that each row contains not only the record attributes but also a unique `row_id` attribute. This `row_id` should ideally be a hashed value or a unique string for each row. The presence of this `row_id` is crucial for internal row tracking. For example, if we have a Record List control of `first_name` and `last_name`, the Calculated Property should return something like this:

```plaintext
"form_record_list_1": [
    {
      "first_name": "testfirst",
      "last_name": "testlast",
      "row_id": "d8yaosi0vqlkmude18"
    },
    {
      "first_name": "test2first",
      "last_name": "test2last",
      "row_id": "dkf28312dfsdfs301"
    }
  ]
```
