> For the complete documentation index, see [llms.txt](https://docs.work-relay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.work-relay.com/forms/basics/conditional-styles.md).

# Conditional styles

Conditional styling allows you to show or hide, disable, make required, or clear form components conditionally. Conditional styling can be applied to various form components:

* Data Source object fields
* Virtual fields
* Section/Page
* Custom Button
* Blank Space
* Custom URL
* Nested Form
* Static Text
* File
* Image
* Related Lists and Lists

{% hint style="info" %}
When conditional styles are applied to the Section/Page component, they will be applied to all items inside the section.
{% endhint %}

## Generic conditional styling

Select component "Section" on the canvas. Click "Add New" button in the "Conditional Styles" section of the component properties sidebar:

![](/files/df3b3e5888f5ab96646e089b0eac463b513e80fa)

On Conditional Settings popup choose action type and click "Add" button in Conditions:

![](/files/cf99e121500a224f570f53cf40e50e8c9e6666ad)

See details on using conditions at [Working with conditions](/forms/basics/working-with-conditions.md) article.

**Conditions are:**

* **hide** - item will not be displayed
* **show** - item will be displayed (and, will be hidden by default when conditions do not matched)
* **disable** - item will be displayed in disabled mode
* **clear** - item inputs will be cleared
* **required** - item will become required to be filled in (available for input items only)

An example below displays Section in case when Account (form data source object) type is set to Installation Partner. Check images below to see how form looks like when account type is set to Installation Partner and when it stores any other value.

![](/files/418ec0e9cba641ad216a72ca98a984fd584e912d)

## Dynamic conditional styling

Having controlling field(s) displayed on the form allows user to use dynamic styling.

Select component "Nested Form" on the canvas and click "Add New" button at Conditional Styles:

![](/files/fd75ec90c1d2beb0e2efbd47d0b1857b216e8cdd)

On Conditional Settings popup select action type "Hide" and click "Add" button to configure condition:

![](/files/0828f06e22567cee9fafb132a66834adc1ed4f8b)

See details on using conditions at [Working with conditions](/forms/basics/working-with-conditions.md) article.

Check images below to see how form will look like when user chooses "Hot" rating on the form (1) and when any other value is selected:

![](/files/3392e819df39b8fb0234a6b50fba7ecaceb02513)

## Turn on/off conditions on a form item

For cases when you need to disable conditional styling without removing styles you have added you can simply turn them off:

![](/files/ec4c39390b8502c0f71f21ba54ea65350a307f14)

You can also turn styles on/off from Conditional Style Settings popup:

![](/files/49015cff23732aedd705cf838a8ecf896f9c850e)