---
title: "Form Switch Element"
description: "With the Form Switch Element user can switch between a \"true\" or \"false\" Status of one Information.  For Example to agree to some Terms."
path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-switch-element.html
lastModified: 2025-02-25T12:26:51.373Z
---

# Form Switch Element

# Form Switch Element

Agree [Terms and Conditions](#)

[Info Icon Key: info-icon-1]

[Info Icon Aria Label: Tooltip]

[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]

**Confirm** or *disagree* to an Option 1 or 2

[How to Configure](#how-to)

### Description

The Form Switch Element Component can be used to offer an Option for a "Yes / No" Selection.

- Dynamic Content can be provided
- Features Rich Text
- Can be made required

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-switch-toggle--interactive)

### Inspirations

Show me more

Can you see me now?

### Usage Rules & Features

##### Features

- Rich Text is possible
- Can provide dynamic Content based on Selection

##### Properties

- Can be made mandatory
- Add Required Message

##### Design

- Make it activated by default
- 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

- 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
- Do not use it in Form Grid

## 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_switch_properties%3A3-4?fmt=webp)

### Form Switch Properties

The Form Switch needs a Text, as well as an Element Name. This Element Name is needed for technical referencing.

Furthermore, it is possible to set it to True by Default using "Activated by default" Option.

If Editor wants to send a custom Value, if Switch is activated, an Element Value should be provided. Otherwise, on/off Value will be submitted with the Form.

### 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_switch_dyn-area%3A2-1?fmt=webp)

### Provide dynamic Content Area

If Checkbox to provide dynamic Area for an Option is selected in Properties Tab, after confirming the Dialog, a Parsys under the Form Switch Toggle appears. In this Parsys the dynamic Content can be added.

#### Keep in Mind

Do never put dynamic Content into dynamic Content !

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_switch_info-icon%3A1-1?fmt=webp)

### Add an Info Icon

Selecting "Enable Info Icon" Checkbox in Properties Tab reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip or attach a Modal via Modal ID.

#### 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_switch_constraints%3A1-1?fmt=webp)

### Configure Constraints

In Constraints Tab of Form Switch, Editor can choose, if this Field should be required. If so, also providing a Required Message is advisable.