--- title: "Form Checkbox" description: "With the Form Checkbox Element, Editor can create Checkboxes." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-checkbox.html lastModified: 2025-06-11T13:30:44.583Z --- # Form Checkbox # Form Checkbox Element ### Information requested I am a **single** Checkbox. Often I am used for Terms etc. We are collected in a Group I like single Checkboxes to only offer one Option. I like Checkboxes in a Group to ask multiple Things that belong to one Topic. [How to Configure](#how-to) ### Description The Form Checkbox Element Component can be used to offer an Option for a "Yes/No" Selection. - Single Checkbox or Group of Checkboxes possible - Features Rich Text - Can be made required [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-checkbox--interactive) ### Inspirations ### Information requested ###### What do you like? Select at least 1 and 4 Checkboxes. I like [Form Containers](/content/foundationNG/en/specials/form-container.html). [Info Icon Key: info-icon-1] [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] I like [Form Elements](/content/foundationNG/en/specials/form-elements.html). I like it **Bold**. I like it *Italic*. I like it with Subscript and Superscript. I like none of these. So what do you like instead? What do you like? ### Usage Rules & Features ##### Features - Rich Text is possible ##### Properties - Can be made mandatory - Add Required Message - Single Checkbox or Group of Checkboxes possible ##### Design - 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 - Choose Checkbox Group to ask multiple Things that belong to one Topic - Choose single Checkbox to only offer one Option - After Publishing, check Form sending works as expected - Ensure Mulesoft Integration and Configuration is done [Info Icon Key: info-icon-2] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ##### 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-2] ##### 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_checkbox_type-selection%3A3-4?fmt=webp) ### Select a Type At first, Editor needs to decide whether to have a single Checkbox or to have a Group of Checkboxes. Depending on the selected Type, Editor Dialog differs. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_checkbox_type-single%3A3-4?fmt=webp) ##### Type Checkbox For Type Checkbox, Editor needs to provide a Text and an Element Name. The Text can be styled with Rich Text Options and it will be visible in the Form, while the Element Name is needed for technical referencing. Furthermore, it can be configured to be "Initially checked" and Editor can define which Value should be send for checked and unchecked Checkbox (default: on/off). ### 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_checkbox_type-group%3A3-4?fmt=webp) ##### Type Checkbox Group For Type Checkbox Group, Editor can configure a Minimum and a Maximum Amount of Checkboxes from the Group that must be selected by an User. Beside that, a Group Label is needed and Size of it can be from H3 to H5, Abstract, Copy, or Copy Small. Furthermore, HTML-Tag for SEO can be chosen for the Label. For each Checkbox that should be added to a Group, Editor needs to click on Add Button. Then, Editor needs to provide a Text and an Element Name for each. The Text can be styled with Rich Text Options and it will be visible in the Form, while the Element Name is needed for technical referencing. Furthermore, each Checkbox can be configured to be "Initially checked" idividually and Editor can define which Value should be send for checked and unchecked Checkbox (default: on/off) per Checkbox. ### 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_checkbox_required%3A4-3?fmt=webp) ### Make a Checkbox required In Required Accordion of Dialog, Editor can choose if this Field should be required. If so, also providing a Required Message is advisable. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_checkbox_info-icon%3A1-1?fmt=webp) ### 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 Type Checkbox, or for Type Checkbox Group. In a Checkbox Group the hole Group can get one Info Icon, but it is also possible to have one per Checkbox. #### 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) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_checkbox_dyn-area%3A2-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 Checkbox 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 !