Single-Choice Selection with Visual Cards

The Radio Button with Cards element provides a visually appealing way to present a list of single-choice options using card-style buttons. This element is commonly used within data input or edit modals, allowing users to select one option from a set of predefined choices.

Installation

1. Access the Element Studio:

   • In the Individual App Canvas, locate and hover over the modal where you want to add the Radio Button with Cards element.

   • Click Access Element Studio.

2. Add the Radio Button with Cards:

   • Inside Element Studio, click Add New Block.

   • Use the search bar to find "Radio Button with Cards" and click on it to add it to the modal.

Configuring the Radio Button with Cards

1. Title (Optional):

   • You can add a title for the radio button group to provide context or instruction to users.

2. Connect to a Data Field:

   • Link the element to a data field within the app's data structure. This is where the selected option's values are stored in the backend.

3. Set Options:

   • Define the choices available for selection:

     • Button Name: The label that appears on each card for users to see (e.g., "True").

     • Value When Selected: The value that will be saved in the backend when the option is chosen by the user.

With the Radio Button with Cards element, you can enhance single-choice selection fields with a visually organized layout, making it easy for users to understand and interact with the available options.