---
title: "Form Option Picker"
description: "The Form Option Picker can be used to offer an Possibility to select different Options."
path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-option-picker.html
lastModified: 2025-02-25T10:43:19.941Z
---

# Form Option Picker

# Form Option Picker Element

### Information requested

Product 1: Product one | 89,99 €

Product 2: Product two | 50,00 €

Product 3: Product three | 69,95 €

[How to Configure](#how-to)

### Description

The Form Option Picker Component can be used to offer an Possibility to select different Options.

- 4 different Information Types
- Single or Multi Selection is possible
- Can be made required

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

### Inspirations

### Information requested

##### Option Picker with Information Type "none"

Like it: I like Option Picker

Dislike it: I do not like Option Picker

##### Option Picker with Information Type "Color"

Red 500: Red 500 has Hex-Value: #ea1b0a

Purple 500: Purple 500 has Hex-Value: #961482

Blue 500: Blue 500 has Hex-Value: #27a9ff

Grey 500: Grey 500 has Hex-Value:

##### Option Picker with Information Type "Icon"

Mail: Write me a Mail

Phone: Call me

### Usage Rules & Features

##### Features

- 4 different Information Types

##### Properties

- Can be made mandatory
- Add Required Message

##### Design

- Single or Multi Selection is possible

##### 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-1]

[Info Icon Aria Label: Mulesoft & MT Captcha Integration]

[Info Icon Content Type: Experience fragment]

[Info Icon Content Start: info-icon-1]

##### 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-1]

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

### Form Option Picker Properties

The Form Option Picker needs an Element Name. This Element Name is needed for technical Referencing.

Furthermore, it is possible to choose between four different Information Types:

- None (default)
- Icon
- Color
- Price

Moreover, Editor can decide between Single and Multi-Selection as Selection Type.

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

### Options for Option Picker of Information Type "None"

Per Option of Options for Option Picker of Information Type "None", Editor needs to click on Add Button. Then, following Options are available:

- Label

Enter Label that should be displayed.

- Text

Enter a short Description Text with not more than 125 Characters.

- Option Value

Enter Value that should be send with the Form.

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

### Options for Option Picker of Information Type "Icon"

Per Option of Options for Option Picker of Information Type "Icon", Editor needs to click on Add Button. Then, following Options are available:

- Label

Enter Label that should be displayed.

- Text

Enter a short Description Text with not more than 125 Characters.

- Icon

Select an Icon for the Option.

- Option Value

Enter Value that should be send with the Form.

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

### Options for Option Picker of Information Type "Color"

Per Option of Options for Option Picker of Information Type "Color", Editor needs to click on Add Button. Then, following Options are available:

- Label

Enter Label that should be displayed.

- Text

Enter a short Description Text with not more than 125 Characters.

- Color

Choose a Color for the Option.

- Option Value

Enter Value that should be send with the Form.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_option-picker-prize_options%3A3-4?fmt=webp)

### Options for Option Picker of Information Type "Prize"

Per Option of Options for Option Picker of Information Type "Price", Editor needs to click on Add Button. Then, following Options are available:

- Label

Enter Label that should be displayed.

- Text

Enter a short Description Text with not more than 125 Characters.

- Price

Enter a Price for the Option.

- Option Value

Enter Value that should be send with the Form.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_option-picker_constraints%3A4-3?fmt=webp)

### Configure Constraints

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