---
title: Configuring conditional component visibility
description: Configure PingOne forms to show or hide components so that a form can be more modular with conditional component visibility.
component: pingone
page_id: pingone:user_experience:p1_configuring_conditional_component_visibility
canonical_url: https://docs.pingidentity.com/pingone/user_experience/p1_configuring_conditional_component_visibility.html
revdate: May 19, 2026
section_ids:
  steps: Steps
  use-case-reusing-one-form-for-multiple-scenarios: "Use case: Reusing one form for multiple scenarios"
  steps-2: Steps
---

# Configuring conditional component visibility

You can configure components so that they're shown or hidden in a user-facing form based on one or more Boolean values pulled from your DaVinci flow.

|   |                                                                                                                                                                                                       |
| - | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   | The following components don't have visibility controls:- **Submit button**

- **MFA Device Selection - Authentication**

- **MFA Device Selection - Registration**

- **FIDO2**

- **Error Display** |

## Steps

To configure conditional component visibility:

1. In the PingOne admin console, go to **User Experience > Forms**.

2. Click the **Pencil** ([icon: pencil, set=fa]) icon next to the form to configure.

3. Select a component in the form builder.

4. In the **Visibility Type** list, select whether the component is always visible, shown by default, or hidden by default.

5. (Optional) Change the default **Visibility Key**. You'll need this key for the PingOne Form connector's **Component Visibility** field.

6. Click **Save**.

7. Configure conditional component visibility in the [Form connector](https://docs.pingidentity.com/connectors/form_connector.html).

   1. In your DaVinci flow, add the PingOne Form connector.

   2. Select the **Show Form** capability.

   3. In the **Form** list, select the form you configured with conditional component visibility in your PingOne admin console.

   4. In the **Component Visibility** field, you can populate the **Value** for the key associated with each component that was either **Hidden by default** or **Shown by default** when you created the form.

   5. For each **Key**, select a variable from your flow that will act as a Boolean to show or hide the components associated with the key.

8. Click **Apply**.

## Use case: Reusing one form for multiple scenarios

In this example, we'll build an one-time passcode (OTP) *(tooltip: \<div class="paragraph">
\<p>A passcode valid for only one sign-on or transaction on a computer system or other digital device. Also known as a one-time password, one-time PIN, or dynamic password.\</p>
\</div>)* prompt form for registration that will allow a user to register with either an email or an SMS.

## Steps

1. In the PingOne admin console, go to **User Experience > Forms**.

2. Click the **[icon: plus, set=fa]**icon.

3. Enter a form name and optional description and click **Add Form**.

4. Select **Email OTP Prompt - Registration**.

5. On the **Fields** and **Toolbox** tabs, customize the form to include components for an SMS OTP prompt for registration:

   ![Form configured in the form builder with components for both email and SMS OTP registration.](_images/p1-forms-conditional-components.png)

6. To make the user-facing form a conditional form that shows an OTP form for email by default but can also be an SMS OTP form based on Boolean values in the DaVinci flow:

   1. Click the **Translatable Rich Text** heading component for email in the form builder.

   2. In the configuration panel, set the **Visibility Type** to **Show by default**.

   3. (Optional) Change the **Visibility Key** to something meaningful, such as `otpEmail`.

      |   |                                                                                                                                                           |
      | - | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
      |   | This key doesn't need to be unique because multiple components can share the same **Visibility Key**, allowing you to show or hide a group of components. |

   4. Repeat for the **Translatable Rich Text** description and **Email Address** components, ensuring the **Visibility Key** is `otpEmail` so the components are grouped for visibility.

   5. Repeat these steps for the SMS OTP form components, but set the **Visibility** to **Hide by default** and create a shared **Visibility Key**, such as `otpText`.

7. Click **Save**.

8. Configure conditional component visibility in the Form connector.

   1. In your DaVinci flow, add the PingOne Form connector.

   2. Select the **Show Form** capability.

   3. In the **Form** list, select the form you configured with conditional component visibility in your PingOne admin console.

   4. In the **Component Visibility** field, you can populate the **Value** for the key associated with each component that was either **Hidden by default** or **Shown by default** when you created the form.

   5. For each **Key**, select a variable from your flow that will act as a Boolean to show or hide the components associated with the key.

9. Click **Apply**.