Segmented

Range

A small set of exclusive choices, at most seven.

Segmented {
    options: vec![
        ("day".into(), "Day".into()),
        ("week".into(), "Week".into()),
        ("month".into(), "Month".into()),
    ],
    current: "week".into(),
}

Two choices

A segmented control can be a pair.

Segmented {
    options: vec![("list".into(), "List".into()), ("board".into(), "Board".into())],
    current: "list".into(),
}

Five choices

Labels stay short; the pressed one is announced.

Segmented {
    options: vec![
        ("1h".into(), "1h".into()),
        ("24h".into(), "24h".into()),
        ("7d".into(), "7d".into()),
        ("30d".into(), "30d".into()),
        ("90d".into(), "90d".into()),
    ],
    current: "7d".into(),
}

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_core::Segmented;
Segmented { options: vec![("day".into(), "Day".into()), ("week".into(), "Week".into())], current: "week".into() }

use ocean_ui_native::{core::Segmented, widgets::Pick};
let options = vec![("day".into(), "Day".into()), ("week".into(), "Week".into())];
let chosen: Option<String> = Segmented { options, current: "week".into() }.pick(ui).value;

Cargo feature forms of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

Props

Accessibility

• The options sit in a form with role="group", and each is a real button reached with Tab.
• The option that is on says aria-pressed="true" and the others aria-pressed="false".
• The group has no name of its own, so place it under a heading or label that says what it chooses.

Related

• Tabs
• Field
• Button

Markdown

The same page as Markdown, for an agent or a pull request.

# Segmented

A row of options with exactly one on; on the web a GET form sends it back, so it works without script.

A segmented control picks one of a few options that change what a page shows, such as Day, Week and Month. On the web each option is a submit button named seg in a GET form, so choosing one reloads the page with ?seg=<value>; the native face hands back the value clicked through Pick. Options are (value, label) pairs, and current is the value that is on.

## Use it

Web:

```rust
use ocean_ui_core::Segmented;
Segmented { options: vec![("day".into(), "Day".into()), ("week".into(), "Week".into())], current: "week".into() }
```

Native:

```rust
use ocean_ui_native::{core::Segmented, widgets::Pick};
let options = vec![("day".into(), "Day".into()), ("week".into(), "Week".into())];
let chosen: Option<String> = Segmented { options, current: "week".into() }.pick(ui).value;
```

Cargo feature `forms`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `options` | `Vec<(String, String)>` | `—` | The choices in order as (value, label) pairs; the value is sent as seg on the web and comes back from Pick natively. |
| `current` | `String` | `—` | The value of the option that is on. |

On the Mac: ![Segmented, dark](/ui/native/segmented-dark.png) ![Segmented, light](/ui/native/segmented-light.png)

## Examples

### Range

A small set of exclusive choices, at most seven.

```rust
Segmented {
    options: vec![
        ("day".into(), "Day".into()),
        ("week".into(), "Week".into()),
        ("month".into(), "Month".into()),
    ],
    current: "week".into(),
}
```

### Two choices

A segmented control can be a pair.

```rust
Segmented {
    options: vec![("list".into(), "List".into()), ("board".into(), "Board".into())],
    current: "list".into(),
}
```

### Five choices

Labels stay short; the pressed one is announced.

```rust
Segmented {
    options: vec![
        ("1h".into(), "1h".into()),
        ("24h".into(), "24h".into()),
        ("7d".into(), "7d".into()),
        ("30d".into(), "30d".into()),
        ("90d".into(), "90d".into()),
    ],
    current: "7d".into(),
}
```

## Accessibility

- The options sit in a form with role="group", and each is a real button reached with Tab.
- The option that is on says aria-pressed="true" and the others aria-pressed="false".
- The group has no name of its own, so place it under a heading or label that says what it chooses.

## Related

- [Tabs](/ui/components/tabs.md)
- [Field](/ui/components/field.md)
- [Button](/ui/components/button.md)