---
title: "Form Segmented Button Element"
description: "The Form Segmented Button Element can be used to offer an Possibility to select different Options."
path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-segmented-button-element.html
lastModified: 2025-11-05T12:51:09.845Z
---

# Form Segmented Button Element

# Form Segmented Button Element

[How to Configure](#how-to)

### Description

The Form Segmented Button Component can be used to offer an Possibility to select different Options.

- Can have an Icon
- 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-segmented-button-group--interactive)

### Inspirations

### Usage Rules & Features

##### Features

- Can have an Icon per Segmented Button
- Up to five Segmented Buttons can be used

##### Properties

- Can be made mandatory
- Add Required Message

##### Design

- Single or Multi Selection is possible
- Features Selection Indicator

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

### Form Segmented Button Settings

****The Segmented Button Group Component allows Editors to define an Element Name for technical Referencing. In addition, the Component supports Configuration of the Selection Type (Single or Multi Selection) and the Activation of Selection Indication. A new Option Full Width has been added to the Dialog: when enabled, all Buttons are evenly distributed across the full Container Width, ensuring a consistent and balanced Layout. By default, the Full Width Option is disabled, so the component behaves as before.

Furthermore, a Group Label can be maintained and Size of it can be choosen from H5, Abstract, or Copy Size.

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

### Options for Segments of Segmented Button

A Segmented Button needs at least two Segments, but more are possible.

Per Segment the following Options are available:

- Initially selected

If selected, this Segment will be already selected on Page Load.

- Icon

Optional choose an Icon to be displayed.

- Label

Enter the Label that should be used for this Segment.

- Hover Title

Enter a Text that will be shown on Hover.

- Element Value

Enter Value that should be send with the Form.

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

### Configure Constraints

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