--- title: "Form Radio Button Group Element" description: "With the Form Radio Button Group Element, multiple Radio Buttons can be created, where User can only select one of it." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-radio-button-group-element.html lastModified: 2025-02-25T10:51:18.606Z --- # Form Radio Button Group Element # Form Radio Button Group ### Information requested Vertical Group **Option A** I like most. *Option B* is the best. [Info Icon Key: info-icon-1] [Info Icon Aria Label: info] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-1] Or better Option C ? Horizontal Group [Info Icon Key: info-icon-2] [Info Icon Aria Label: info2] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-2] **Option A** *Option B* Option C ? [How to Configure](#how-to) ### Description The Form Radio Button Group Element Component can be used to offer an Possibility to select different Options. - Features Rich Text - Features dynamic Content Areas per User Selection - Can be made required [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-radio-button-group--interactive) ### Inspirations ### Information requested How should we contact you? [Info Icon Key: info-icon-3] [Info Icon Aria Label: info2] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-3] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-3] Post Mail Telephone Please let us know your Adress Please let us know your Mail Address Please let us know your Phone Number ### Usage Rules & Features ##### Features - Can provide dynamic Content based on Selection - Rich Text is possible ##### Properties - Can be made mandatory - Add Required Message ##### Design - Choose between horizontal or vertical Layout - Initial Value Selection can be defined - Add Info Icon for additional Information ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | no | ##### DO's - Use vertical Layout for long Options or more then three Options - Use horizontal Layout for small Options or three or more Options - After Publishing, check Form sending works as expected - Ensure Mulesoft Integration and Configuration is done [Info Icon Key: info-icon-4] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-4] ##### Mulesoft & MT Captcha Mulesoft and MT Captcha are both needed for Forms. Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form. [Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) [Info Icon Content End: info-icon-4] ##### DONT's - Do not use it in smaller Grid then 6 Column Grid - Try not to use it outside of Form Container - Any Kind of Form Element can be used only inside a Form Container ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_radio-btn-group_properties%3A3-4?fmt=webp) ### Set Properties A Label and an Element Name is required. The Label is visible in the Form, while Element Name is needed for technical referencing. Additionally, a Format of the Label can be choosen. Available Label Formats are H3 to H5, Copy, Copy Small, and Abstract. Beside that, Radio Buttons can also be configured in horizontal Layout. But this is only adviceable for 2 to 3 short Options. Moreover, an Help Message can be entered. Furthermore, if Local Source is selected, multiple Options can be added. Each Option needs a Text and a Value. The Text can be styled via Rich Text Editor Features. Beside that, the Option can be set as initially selected, but this is only possible for one Option. Once one Option is selected as Initially Selected, for other Options, it is disabled. ### Rules for the Element Name: The Element Name is a technical Name and therefore, there are some Rules to make it work: - Name must be UNIQUE - Just use lower Case Letters - No special Signs - No Blancs - No Numbers ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_radio-btn-group_dyn-area%3A1-1?fmt=webp) ### Provide dynamic Content Area If Checkbox to provide dynamic Area for an Option is selected, after confirming the Dialog, a Parsys under the Form Radio Button Group appears per Option that should have dynamic Content Area. In this Parsys the Content for that specific Option can be added. #### Keep in Mind Do never put dynamic Content into dynamic Content ! #### Info Icon For Info Icon an Experience Fragment Path of a Tooltip or a Modal ID is needed. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) [Read More about configuring Modal](https://www.eonshowroom.eon.com/en/content-elements/modal.html) ### Add an Info Icon Selecting "Enable Info Icon" Checkbox in Info Icon Accordion, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip or attach a Modal via Modal ID. This can be done either for a single Radio Button Option, or for the hole Group. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_radio-btn-group_constraints%3A1-1?fmt=webp) ### Configure Constraints In Constraints Tab, Radio Button Group is set to be required and it's not unselectable. This is needed as Radio Button Group does not work without choosing one of the Options. Therefore, providing a Required Message is mandatory.