Segmented control

In review

Live · web

View mode: the outline slides; the preview below swaps (Tab in, Arrow keys)

Text only: 2 · 3 · 5 segments

NockerlIcon + label · icon only, sm and md

A disabled segment: skipped by arrow keys, still legible

Full-width: equal-share segments fill the row

Disabled control: dimmed but readable, not interactive

Viewing list · range week · diff unified. The outline slides to the active segment. The island is live.

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
import { NockerlSegmentedControl } from '@dizyx/nockerl-react';

export function TaskViewSwitch() {
  const [view, setView] = useState('list');
  return (
    <>
      <NockerlSegmentedControl
        label="Task view"
        value={view}
        onChange={setView}
        segments={[
          { value: 'list', label: 'List', icon: 'list' },
          { value: 'grid', label: 'Grid', icon: 'grid' },
          { value: 'board', label: 'Board', icon: 'board' },
        ]}
      />
      {view === 'list' ? <TaskList /> : view === 'grid' ? <TaskGrid /> : <TaskBoard />}
    </>
  );
}

// NockerlIcon-only, compact: pass `icon` + `title` (the accessible name) and no `label`.
<NockerlSegmentedControl label="Appearance" size="sm" value={theme} onChange={setTheme}
  segments={[
    { value: 'light', icon: 'sun', title: 'Light' },
    { value: 'dark', icon: 'moon', title: 'Dark' },
    { value: 'auto', icon: 'auto', title: 'Auto' },
  ]} />

// (com.dizyx.nockerl.design on GitHub Packages Maven). One muted track; the ACTIVE
// segment still carries a cyan FILL here, where the ratified expression is the sliding
// OUTLINE (border + ink, see the drift note); the rest stay transparent + muted.
// Pass Modifier.fillMaxWidth() for a full-width control.
import com.dizyx.nockerl.design.components.NockerlSegmented

enum class TaskView(val display: String) { LIST("List"), GRID("Grid"), BOARD("Board") }

var view by remember { mutableStateOf(TaskView.LIST) }

NockerlSegmented(
    options = TaskView.entries.toList(),
    selected = view,
    onSelect = { view = it },
    label = { it.display },
    modifier = Modifier.fillMaxWidth(),
)

// macOS SwiftUI (canonical). Nockerl Voice consumes the published NockerlSegmented
// (see its Appearance row in NockerlVoice/UI/AppSettingsView.swift). The active option
// is a cyan OUTLINE (the 1pt @0.45 selection weight), not a fill; equal-width segments
// sit on a flat neutral hairline track with zero fill.
NockerlSegmented(
    options: TaskView.allCases,
    selected: view,
    label: { $0.label },
    onSelect: { view = $0 }
)

// System stand-in (more segments / native feel), the platform segmented picker:
Picker("Task view", selection: $view) {
    ForEach(TaskView.allCases) { view in
        Text(view.label).tag(view)
    }
}
.pickerStyle(.segmented)

Parameters

Prop	Type	Default	Description
`segments` *	`Segment[]`		The segments, left-to-right. 2-5 mutually-exclusive peers.
`value` *	`string`		The currently-active value (controlled). Exactly one is selected.
`onChange`	`(next: string) => void`		Fired with the next value. Ignored for a disabled segment.
`label` *	`string`		Accessible name for the group (wired via aria-label).
`size`	`SegmentSize`	`'md'`	Control height + padding + type role.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Track axis. `horizontal` (default) = segments in a row, pill slides X. `vertical` = segments stacked, pill slides Y (e.g. an AM/PM meridiem in a narrow slot). Additive: omitting it is a no-op for existing (horizontal) consumers.
`fullWidth`	`boolean`	`false`	Stretch to fill the row (equal-width segments) vs. hug its content.
`disabled`	`boolean`	`false`	Dim + disable the whole control.

Also accepts the native <div> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

Parameter	Type	Default	Description
`options` *	`List<T>`		The segments, in order (typically an `enum`). Each gets an equal-weight share of the track.
`selected` *	`T`		The currently-active option. The published Compose control still marks its segment with a cyan fill; the ratified expression is the sliding outline (see the drift note).
`onSelect` *	`(T) -> Unit`		Invoked with the tapped option. No-op while `enabled = false`.
`label` *	`(T) -> String`		Maps an option to its display string (e.g. `{ it.display }`).
`modifier`	`Modifier`	`Modifier`	Outer modifier. Pass `Modifier.fillMaxWidth()` for a full-width control.
`enabled`	`Boolean`	`true`	When `false`, the whole control is dimmed (alpha) and non-interactive.

SwiftUI exposes the control as the published NockerlSegmented, which Nockerl Voice consumes, or a system Picker(.segmented) as a stand-in. Selection is passed as a value with an onSelect callback rather than a two-way binding.

Parameter	Type	Default	Description
`options` *	`[T]`		The segments (`T: Hashable`), rendered left-to-right as equal-width segments.
`selected` *	`T`		The active option. Its segment gets a cyan outline at the selection weight (`border.width.selection` @ `border.opacity.selection`), not a fill.
`label` *	`(T) -> String`		Maps an option to its visible text (e.g. `{ $0.label }`).
`icon`	`((T) -> String?)?`	`nil`	Optional SF Symbol name per segment, leading the label.
`segmentEnabled`	`(T) -> Bool`	`{ _ in true }`	Per-segment enablement. A disabled segment dims but stays legible.
`size`	`NockerlSegmentedSize`	`.md`	Segment height, padding, and type role.
`onSelect` *	`(T) -> Void`		Fired with the chosen option. The caller owns the state.

Cross-platform drift (tracked for reconciliation)

Segmented control is the connected, single-track view/mode switch, distinct from its neighbours: tabs navigate page/section content (each tab owns a tabpanel; role="tablist"), whereas a segmented control just flips a small set of mutually-exclusive views/modes with no associated panels (role="radiogroup"). A radio group is the same single-choice intent but looser and labelled: separate rows that can carry descriptions; reach for it for 4+ rich choices, and for the segmented control for 2 to 5 compact peers.

Real divergences between the shipped platforms:

Active-segment treatment (ratified): the selected segment is the sliding cyan outline, accent border + accent ink with no wash, per design laws §6 and §7, which name the filled cyan pill as the former treatment. The Swift idiom on this page already draws that outline at the selection weight (border.width.selection @ border.opacity.selection); the published Compose control still fills its active segment, so Android is the platform that converges here.
The slide. Settled alongside it: the marker animates transform + width, never the fill, wherever the control is ours. Compose already slides its indicator; the Swift idiom cuts straight to the new stroke and adopts the slide.
Track surface (ratified): the track is a flat neutral hairline container with zero fill, on the 12px control radius with a 2px inset, grouping the segments as connected peers. It carries no recessed inset-shade, because with the active segment reading by outline there is no fill for a well to sit under. Swift and web both draw this. Compose still uses a cardAlt2 well, which converges when Android does.