# Segmented Control

A segmented control for switching between views.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="segmented-control/Basic" />

## Import [#import]

```rust
use maccn::{MacSegment, MacSegmentedControl};
```

## Usage [#usage]

```rust
MacSegmentedControl::new("view-toggle")
    .child(MacSegment::new("list").selected(true).child("List"))
    .child(MacSegment::new("grid").child("Grid"))
    .child(MacSegment::new("columns").child("Columns"));
```

## Multiple [#multiple]

<ComponentPreview name="segmented-control/Multiple" />

```rust
use maccn::{MacSegment, MacSegmentedControl};

MacSegmentedControl::new("segmented-multiple")
    .w(px(220.))
    .child(
        MacSegment::new("seg-m-0")
            .selected(selected.contains(&0))
            .child("B")
            .on_click({ ... }),
    )
    .child(
        MacSegment::new("seg-m-1")
            .selected(selected.contains(&1))
            .child("I")
            .on_click({ ... }),
    )
    .child(
        MacSegment::new("seg-m-2")
            .selected(selected.contains(&2))
            .child("U")
            .on_click({ ... }),
    )
```

## Sizes [#sizes]

<ComponentPreview name="segmented-control/Sizes" />

```rust
use gpui::div;
use maccn::{MacControlSize, MacSegment, MacSegmentedControl};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(
        MacSegmentedControl::new("segmented-xl")
            .size(MacControlSize::ExtraLarge)
            .w(px(320.))
            .child(MacSegment::new("seg-xl-0").selected(true).child("Left"))
            .child(MacSegment::new("seg-xl-1").child("Right")),
    )
    .child(
        MacSegmentedControl::new("segmented-m")
            .size(MacControlSize::Mini)
            .w(px(140.))
            .child(MacSegment::new("seg-m-0").selected(true).child("On"))
            .child(MacSegment::new("seg-m-1").child("Off")),
    )
```

## Disabled [#disabled]

<ComponentPreview name="segmented-control/Disabled" />

```rust
use gpui::div;
use maccn::{MacSegment, MacSegmentedControl};

div()
    .flex()
    .flex_col()
    .gap_2()
    .child(
        MacSegmentedControl::new("segmented-d")
            .w(px(220.))
            .disabled(true)
            .child(MacSegment::new("seg-d-0").selected(true).child("On"))
            .child(MacSegment::new("seg-d-1").child("Off")),
    )
```

## API [#api]

### MacSegmentedControl Props [#macsegmentedcontrol-props]

| Prop       | Type             | Default   |
| ---------- | ---------------- | --------- |
| `size`     | `MacControlSize` | `Regular` |
| `disabled` | `bool`           | `false`   |

### MacSegment Props [#macsegment-props]

| Prop       | Type             | Default   |
| ---------- | ---------------- | --------- |
| `selected` | `bool`           | `false`   |
| `size`     | `MacControlSize` | `Regular` |
| `disabled` | `bool`           | `false`   |

### Events [#events]

| Event      | Payload                                |
| ---------- | -------------------------------------- |
| `on_click` | `(&ClickEvent, &mut Window, &mut App)` |