Skip to main content
Version: 3.4.0

Segmented button

It allows users to pick only one option from a group of options, and you can choose to have between 2 and 5 options in the group. The segmented button is easy to use, and can help make your application easier for people to use.

Configuring the segmented button

Segmented button settings

The available configuration options for this form element are:



  • Label - the label of the segmented button
  • Helpertext - additional information about the segmented button (can be hidden inside an infopoint)


  • Default Value - the default value of the segmented button (it can be selected from one of the static source values)
  • Source Type - it is by default Static
  • Add option - value/label pairs can be defined here


The following validators can be added to a segmented button: required and custom (more details here).

UI actions

UI actions can be added to the segmented button element to define its behavior and interactions.

  • Event - possible value: CHANGE
  • Action Type - select the action type

For more details on how to configure a UI action, click here.

Segmented button styling

To create a segmented button with specific styling, sizing, typography, and color settings, you can use the following configuration:


  • set the width of the button - fill/fixed/auto


Choose an appropriate font family, size, and weight for the button label text.

  • Label Color - set the color of the button label text
  • Selected State - set the color of the label text when the button is selected
  • Unselected State - set the color of the label text when the button is not selected


  • Selected state - set the background color of the button
  • Unselected state - set the background color of the button


For more valid CSS properties, click here.

Was this page helpful?