Segmented Control offers a clear and accessible way to switch between predefined values and views, e.g., "Inbox," "Drafts," and "Sent."

With Segmented Control, you can make mutually exclusive choices, where only one option can be active at a time, clear and accessible. Without Segmented Control, end users might have to deal with controls like dropdowns or multiple buttons that don't clearly convey state or group options together visually.

The Segmented Control component is made up of a rx.segmented_control.root which groups rx.segmented_control.item.

The rx.segmented_control.item components define the individual segments of the control, each with a label and a unique value.

In the example above:

on_change is used to specify a callback function that will be called when the user selects a different segment. In this case, the SegmentedState.setvar("control") function is used to update the control state variable when the user changes the selected segment.

value prop is used to specify the currently selected segment, which is bound to the SegmentedState.control state variable.