---
schema_version: "1"
id: cc2388b3f1f9446c62746b85e5b320c3905c07b0dac12704e2ea4cdb3637f73c
title: Add a Radio Input Element to a Flexcard (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_a_radio_input_element_to_a_flexcard.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_radio_input_element_to_a_flexcard.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 2c88a515c6b829ce5c8051bfbc20a7bdf3aa9b86ca6dd3949c1d20edf3636569
description: For the managed package runtime, add a Radio input element on a Flexcard to enable users to select an item from one or more options. From the Properties panel, configure properties and custom attributes, add an action, and add conditions.
products:
  - Omnistudio
release: "264"
---
# Add a Radio Input Element to a Flexcard (Managed Package)

For the managed package runtime, add a Radio input element on a Flexcard to enable users to select an item from one or more options. From the Properties panel, configure properties and custom attributes, add an action, and add conditions.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d356344e46">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e46 ">
              <p style="margin-bottom:0;">Available beginning Winter '22.</p>
            </td>

          </tr>
        </tbody>
      </table>

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. From the Build panel, click **Inputs**, and drag the **Radio** element onto the canvas.
3. (Optional) From the Properties panel, update the element name in the **Element Name** field.
4. Configure properties common to all Input elements:
    
    - (Optional) In **Field Binding**, bind the value of the input element to an existing or new data field. See [Bind a Flexcard Input Value to a Data Field (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_bind_a_flexcard_input_value_to_a_data_field.htm&release=264.0.0&type=5 "For the managed package runtime, bind the value of an Input element to a new or existing data field in your Flexcard's data source. When a user updates the input value, the data JSON updates. You can use the new data like any other piece of data from a data source. For example, update the value of an attribute sent from a parent to a child Flexcard based on user input.").
    - In **Field Label**, enter the label that appears next to the element.
    - (Optional) Check **Required** if the user must enter or select a value for this input element.
    - (Optional) Check **Read-only** to disable the ability to modify the input values.
    - (Optional) In **Help Text**, enter helpful text about the purpose of the input field. This feature adds an info icon (i) next to the element's label, which when hovered over displays the text.
5. Select the **Display Mode** for your radio items. Available modes are:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d356344e182">
                  <p style="margin-bottom:0;">Mode</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d356344e188">
                  <p style="margin-bottom:0;">Description</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Mode" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e182 ">
                  <p style="margin-bottom:0;">Vertical</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e188 ">
                  <p style="margin-bottom:0;">Displays radios stacked on top of each other.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Mode" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e182 ">
                  <p style="margin-bottom:0;">Horizontal</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e188 ">
                  <p style="margin-bottom:0;">Displays radios inline.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Mode" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e182 ">
                  <p style="margin-bottom:0;">Button Group</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e188 ">
                  <p style="margin-bottom:0;">Displays options as inline buttons.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Mode" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e182 ">
                  <p style="margin-bottom:0;">Image</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e188 ">
                  <p style="margin-bottom:0;">Displays options as images.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Mode" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e182 ">
                  <p style="margin-bottom:0;">Color</p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d356344e188 ">
                  <p style="margin-bottom:0;">Displays options as colored circles.</p>
                </td>

              </tr>
            </tbody>
          </table>
6. If **Display Mode** is **Image**, configure the following properties:
    
    - **Width**: The width of the image in pixels. Default is 100.
    - **Height**: The height of the image in pixels. Default is 100.
    - **Image Count Per Row**: How many images to display per row. Default is 3.
    - **Enable Caption**: To display the label as a caption underneath the image, enter true. To hide caption, enter false.
7. If **Display Mode** is **Color**, configure the following properties:
    
    - **Width**: The width of the circle in pixels. Default is 100.
    - **Height**: The height of the circle in pixels. Default is 100.
    - **Count Per Row**: How many items to display per row. Default is 3.
8. To enter the options from which the user can select, click **\+ Add New** in the **Options** section. Configure the following properties:
    
    - **Label**: Enter the visible label for the option. Click into the field to select from a list of merge fields available from your data source. Or enter plain text.
    - **Value**: Enter the value of the option. Click into the field to select from a list of merge fields available from your data source. Or enter plain text.
        
        If the **Display Mode** is **Color**, enter the name of a CSS color, such as Yellow. See [Color Names Supported by All Browsers](https://www.w3schools.com/colors/colors_names.asp). Or, enter a HEX code such as #ffff00. See [Colors HEX](https://www.w3schools.com/colors/colors_hexadecimal.asp).
    - **Use As a Default Value**: Set as the default option.
    - **Image**: If the **Display Mode** is **Image**, select an image from the **Select an Image from Content Document** dropdown, or **Upload Image**.
9. (Optional) To configure additional properties available to the element, click **\+ Add New** in the **Custom Attributes** section. For each new attribute, perform the following tasks:
    
    1. Click into the **Attribute** field to select from an attribute in the dropdown. See [RadioGroup Lightning Web Component ReadMe (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_radiogroup_lightning_web_component_readme.htm&release=264.0.0&type=5 "For the managed package runtime, this page contains a RadioGroup LWC ReadMe for each Vlocity release.") for available attributes.
    2. In the **Value** field, enter a value for the attribute.
10. To execute an action when a user interacts with the input element, click **\+ Add Action**, and see [Add a Click Event to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_click_event_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, enable an element on a Flexcard to perform an action when clicked. Supported elements include Image, Block, Icon, and Toggle.").
11. (Optional) To add conditions that must be met for the element to display, see [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.").
12. (Optional) To style your element, click **Style** to open the Style panel, and see [Flexcards Datatable Style Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_datatable_style_properties.htm&release=264.0.0&type=5 "For the managed package runtime, configure style properties specific to the Datatable element from the Style panel of the Flexcard Designer.").

- **[Flexcards Radio Input Element Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_radio_input_element_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, Radio Input element properties are configurable in the Properties panel when you select a Radio element in the Flexcard Designer. Enable users to select one option from a list of options. Display options as radios, images, buttons, or color blocks.