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.
TheSegmented Control component is made up of arx.segmented_control.root which groupsrx.segmented_control.item.
Therx.segmented_control.item components define the individual segments of the control, each with a label and a unique value.
test
test
test
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, theSegmentedState.setvar("control") function is used to update thecontrol state variable when the user changes the selected segment.
value prop is used to specify the currently selected segment, which is bound to theSegmentedState.control state variable.
API Reference
rx.segmented_control.root
Root element for a SegmentedControl component.
| Prop | Type | Values | Default | Interactive |
|---|---|---|---|
size | "1" | "2" | ... | | |
variant | "classic" | "surface" | | |
type | "single" | "multiple" | | |
color_scheme | "tomato" | "red" | ... | | |
radius | "none" | "small" | ... | | |
default_value | Union[str, Sequence] | | |
value | Union[str, Sequence] | |
Event Triggers
See the full list of default event triggers| Trigger | Description |
|---|---|
on_change | Handles the `onChange` event for the SegmentedControl component. |
rx.segmented_control.item
An item in the SegmentedControl component.
| Prop | Type | Values | Default | Interactive |
|---|---|---|---|
value | str | |