> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.segmented_control.root
  - rx.segmented_control.item

SegmentedControlRoot: |
  lambda **props: rx.segmented_control.root(
      rx.segmented_control.item("Inbox", value="inbox"),
      rx.segmented_control.item("Drafts", value="drafts"),
      rx.segmented_control.item("Sent", value="sent"),
      default_value="inbox",
      **props,
  )

SegmentedControlItem: |
  lambda **props: rx.segmented_control.root(
      rx.segmented_control.item("Inbox", value="inbox", **props),
      rx.segmented_control.item("Drafts", value="drafts"),
      default_value="inbox",
  )
---

```python exec
import reflex as rx


class SegmentedState(rx.State):
    """The app state."""

    control: str = "test"

    @rx.event
    def set_control(self, value: str | list[str]):
        self.control = value
```

# 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.

```python demo
rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item("Home", value="home"),
        rx.segmented_control.item("About", value="about"),
        rx.segmented_control.item("Test", value="test"),
        on_change=SegmentedState.set_control,
        value=SegmentedState.control,
    ),
    rx.card(
        rx.text(SegmentedState.control, align="left"),
        rx.text(SegmentedState.control, align="center"),
        rx.text(SegmentedState.control, align="right"),
        width="100%",
    ),
)
```

**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.

## API Reference

### rx.segmented_control.root

Root element for a SegmentedControl component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | Literal["1", "2", "3"], Breakpoints[str, Literal["1", "2", "3"]] | - | The size of the segmented control: "1", "2", "3". |
| `variant` | Literal["classic", "surface"] | - | Variant of button: "classic", "surface". |
| `type` | Literal["single", "multiple"] | - | The type of the segmented control, either "single" for selecting one option or "multiple" for selecting multiple options. |
| `color_scheme` | Literal["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` | Literal["none", "small", "medium", "large", "full"] | - | The radius of the segmented control: "none", "small", "medium", "large", "full". |
| `default_value` | str, Sequence[str] | - | The default value of the segmented control. |
| `value` | str, Sequence[str] | - | The current value of the segmented control. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_change` | Handles the `onChange` event for the SegmentedControl component. |

### rx.segmented_control.item

An item in the SegmentedControl component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | str | - | The value of the item. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/