Segmented Control

Anatomy

A boxed switch between a small set of mutually exclusive views. Rendered as real <a> links so it works with JavaScript disabled: each stop is a URL (?view=chat), and the selected stop is marked aria-current="page". The consumer can wire client-side switching on top to avoid the navigation.

maud_ui::primitives::segmented_control

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`stops`	`Vec<Stop>`	`[]`	The stops, left to right.
`selected`	`usize`	`0`	Index of the active stop.
`aria_label`	`Option<String>`	`None`	Optional accessible label for the group.

Examples

Verbosity switch

Three tabs collapsed into one control — Clean · Chat · Raw — with the reading position kept across switches.

Clean Chat Raw

Two stops

The minimum useful switch.

Diff Blame

Usage and composition

Import

use maud_ui::primitives::segmented_control::{self, Props, Stop};

Example

use maud_ui::primitives::segmented_control::{self, Props, Stop};

segmented_control::render(Props {
    stops: vec![
        Stop::new("Clean", "?view=clean"),
        Stop::new("Chat", "?view=chat"),
        Stop::new("Raw", "?view=raw"),
    ],
    selected: 1,
    aria_label: Some("Transcript verbosity".into()),
})

Stop

Stop::new(label, href) — a visible label and the URL the stop navigates to.

CSS classes

mui-segmented — the container.
mui-segmented__stop — a stop; mui-segmented__stop--active on the selected one.

Tabs (for full panelled views), Toggle group, Composer (uses this as its verbosity switch).

Accessibility

The group is role="tablist"; each stop is role="tab" with aria-selected, and the active stop also carries aria-current="page". Because the stops are anchors, keyboard and screen-reader users get native link semantics with no JS.

← Back to Gallery