Web Segmented Control

From Xojo Documentation

The SegmentedControl is a horizontal button made up of multiple segments. Each segment can be clicked independently of the others.

To edit the properties of the segments (Text, Icon and Selected) in the control, use the Set Default Value button on the Layout Editor toolbar or press Return when the control is selected.

Below are commonly used events, properties and methods. Refer to WebSegmentedControl in the Language Reference for the complete list.



The Action event is called when the Segmented Control is clicked. It supplies a SegmentIndex parameter (0-based) that tells you which segment was clicked.



Gets or sets the selected segment.


This property is used to specify the number of segments.


An Integer that indicates how the segments can be used.
Value Type Description
0 Single Only one segment can be depressed. The group of segments behaves like a group of Radio Buttons. One is selected, the others are deselected automatically.
1 Multiple The segments behave like a series of Check Boxes where two or more can be selected at the same time.
2 None Each segment behaves like a Button. When a segment is selected, it is depressed (highlighted) only for the duration of the press or click.



Used to get the text caption of the specified segment (index is zero-based).


Used to set the Text or Icon property of a segment identified by the index parameter (index is zero-based).


Web Segmented Control

Use the SegmentedControl Action event handler to determine which segment was clicked:

Select Case SegmentIndex
Case 0
// First segment clicked
Case 1
// Second segment clicked
End Select

To select a specific segment in code use the ListIndex property:

Example Project

The WebSegmentedControl example project demonstrates these features:

  • Get selected segment item
  • Select a segment
  • Add a segment item


See Also

WebSegmentedControl class; UserGuide:Web UI topic