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 links in one control — Clean · Chat · Raw — with the reading position kept across switches.

Two stops

The minimum useful switch.

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 control is a navigation landmark containing anchors. The active anchor carries aria-current="page"; aria_label optionally names the landmark. Without JavaScript, and in Standard, the stops expose native link semantics and Enter follows the focused link. Enhanced Nova exposes the anchors as buttons and also activates them with Space. This control does not expose tablist or tab roles.

← Back to Gallery