# Customizing Form Fields

Creating a seamless and intuitive user experience is paramount in form design, and with Noloco, each field in a [Form](/forms/forms.md) can be meticulously customized and configured to suit your specific needs. Here, we'll break down how to utilize each form field option to build truly customizable forms in your Noloco app.

The configuration options for a given form field will depend on the type of field, but most form fields have the following options:

* **Label**
* **Help Text**
* **Placeholder**
* **Default Value**
* **Required**
* **Validation**
* **Conditional Visibility Rules**
* **Field Width**

Some fields have the following optional options in addition to the core options above:

* **Display As**
* **Options Filter**
* **Sorting**

<figure><img src="/files/ezeSctnkcQt6aIJqwhgR" alt=""><figcaption></figcaption></figure>

### **Label**

The Label is the identifying name displayed for each field in your form. Use clear and concise wording to help users understand the information required in each field.

### **Help Text**

Help Text provides additional information or instructions to users, clarifying any uncertainties and guiding them to input accurate data.

### **Placeholder**

A Placeholder is a hint or example text displayed in the field before the user inputs their information. Use this to suggest the expected format or to provide an example entry.

### **Default Value**

Assigning a Default Value automatically populates a field with a predetermined entry. This is beneficial for accelerating the form-filling process and ensuring consistency in responses.

A default value can also be chosen from a property of a selected field. For example, if you had a form to send an email, and the form allows you to pick a template. The default value for the Email's Subject could be the `Template -> Subject`

If the Subject field is empty when the Template is chosen, the subject's value will now be the Template's Subject.

### **Required**

Marking a field as Required ensures that users cannot submit the form without completing that particular field, thereby guaranteeing that crucial information isn’t omitted.

#### **Conditionally Required Rules**

When you mark a field as required, you can then specify rules to only make the field required based on the values or conditions of other fields, offering a dynamic approach to form completion and data collection.

### **Validation Rules**

Validation Rules enable you to set specific criteria that the inputted data must meet, reducing errors and ensuring the integrity and accuracy of collected data.

[Learn more about Field Validation Rules](/forms/forms.md#field-validation-rules)

### **Conditional Visibility Rules**

With Conditional Visibility Rules, you can determine which fields are visible based on the values or conditions of other fields, making your forms more adaptable and user-friendly.

### **Field Width**

Adjusting Field Width allows you to control the horizontal space that a field occupies in your form, aiding in the optimal arrangement and visual flow of your form. This can let you have two or more fields in the same row.

***

The following field options are only present on some fields, when the option is available

### **Display As**

Available on Linked Record Fields, Single Option Fields, Multi Option Field, Multi-Line Text Fields

This option controls how the form input is displayed.

The display options shown will depend on the field type. The following field types have the following display options:

**Linked Records**

* **Default:** A dropdown with the ability to search for records
* **List:** An inline list with 3-5 records previewed, and the ability to search for records

**Single Option Fields**

* **Default:** A dropdown with the valid options
* **Radio Buttons:** All of the options are presented with a radio input option
* **Colored Options:** Like the default dropdown, but the options are colored badges

**Multiple Option Fields**

* **Default:** A multi-select dropdown with the valid options
* **Checkboxes:** All of the options are presented with a checkbox input option
* **Colored Options:** Like the default multi-select dropdown, but the options are colored badges

**Multi-Line Text Fields**

* **Default:** A text area that grows as the content grows
* **Rich Text:** A rich text editor with the ability to control formatting such as bold, italic. It outputs Markdown

### **Options Filter**

*Available on: Linked fields*

Options Filter enables the customization of visible options in linked record fields, ensuring users only see relevant choices. [Read more about filtering views](https://guides.noloco.io/pages/views)

### **Sorting**

*Available on: Linked fields*

Sorting allows you to determine the order in which linked record fields are displayed, making it easier for users to locate and select the appropriate option. [Read more about Sorting](https://guides.noloco.io/views/sort-and-limit)

### Limit File Upload Type

Available on: *File upload fields*

Limiting file upload type allows you to restrict the types of files that can be uploaded. This can be achieved by choosing which file types you wish to allow in the editor under "Allowed File Types"

<figure><img src="/files/5oUBQ1SJIq7OYoQlxX5Z" alt=""><figcaption><p>How to limit file upload type</p></figcaption></figure>

The[ MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) that are allowed within the different File Types covered are listed below:

<details>

<summary>Audio</summary>

* `AUDIO_3GPP`
* `AUDIO_3GPP2`
* `AUDIO_AAC`
* `AUDIO_MPEG`
* `AUDIO_WAV`
* `AUDIO_WEBM`

</details>

<details>

<summary>Images</summary>

* `IMAGE_BMP`
* `IMAGE_GIF`
* `IMAGE_HEIC`
* `IMAGE_JPEG`
* `IMAGE_JPG`
* `IMAGE_MS_ICON`
* `IMAGE_PNG`
* `IMAGE_SVG`
* `IMAGE_WEBP`

</details>

<details>

<summary>Video</summary>

* `VIDEO_3GPP`
* `VIDEO_3GPP2`
* `VIDEO_MPEG`
* `VIDEO_WEBM`
* `VIDEO_MP4`
* `VIDEO_MOV`

</details>

<details>

<summary>Text</summary>

* `APPLICATION_JSON`
* `TEXT_CSS`
* `TEXT_CSV`
* `TEXT_HTML`
* `TEXT_JAVASCRIPT`
* `TEXT_PLAIN`
* `TEXT_XML`

</details>

<details>

<summary>Documents</summary>

* `MS_DOC`
* `MS_DOT`
* `MS_DOCX`
* `MS_DOTX`
* `MS_DOCM`
* `MS_DOTM`
* `MS_MSG`
* `MS_XLS`
* `MS_XLT`
* `MS_XLA`
* `MS_XLSX`
* `MS_XLTX`
* `MS_XLSM`
* `MS_XLTM`
* `MS_XLAM`
* `MS_XLSB`
* `MS_PPT`
* `MS_POT`
* `MS_PPS`
* `MS_PPA`
* `MS_PPTX`
* `MS_POTX`
* `MS_PPSX`
* `MS_PPAM`
* `MS_PPTM`
* `MS_POTM`
* `MS_PPSM`
* `APPLICATION_PDF`
* `APPLICATION_XML`

</details>

[Read more about File/Upload](https://github.com/noloco-io/guides/blob/main/data/tables/field-types.md#file-upload)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.noloco.io/forms/forms/customizing-form-fields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
