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.

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).

   • 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:

   Mode	Description
   Vertical	Displays radios stacked on top of each other.
   Horizontal	Displays radios inline.
   Button Group	Displays options as inline buttons.
   Image	Displays options as images.
   Color	Displays options as colored circles.

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. Or, enter a HEX code such as #ffff00. See Colors HEX.

   • 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) 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).
11. (Optional) To add conditions that must be met for the element to display, see Add Conditions to a Flexcard Element (Managed Package).
12. (Optional) To style your element, click Style to open the Style panel, and see Flexcards Datatable Style Properties (Managed Package).

• Flexcards Radio Input Element Properties (Managed Package)
  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.