Segmented Control
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.
Basic Example
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.
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, the SegmentedState.set_control event handler 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.
API Reference
rx.segmented_control.root
Root element for a SegmentedControl component.
sizevariantradiusProps
| Prop | Type | Description |
|---|---|---|
size | "1""2""3" | The size of the segmented control: "1" | "2" | "3". |
variant | "classic""surface" | Variant of button: "classic" | "surface". |
type | "single""multiple" | The type of the segmented control, either "single" for selecting one option or "multiple" for selecting multiple options. |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Override theme color for button. |
radius | "none""small""medium""large""full" | The radius of the segmented control: "none" | "small" | "medium" | "large" | "full". |
default_value | Union[str, Sequence] | The default value of the segmented control. |
value | Union[str, Sequence] | The current value of the segmented control. |
rx.segmented_control.item
An item in the SegmentedControl component.
Props
| Prop | Type | Description |
|---|---|---|
value | str | The value of the item. |