SegmentedControl

A native segmented picker with value-selection and neutral Xcode-style tab roles.

#Import

Import SegmentedControl from @quickgui/solid/swift-ui.

import { Host, SegmentedControl } from "@quickgui/solid/swift-ui";

#Usage

<Host matchContents>
  <SegmentedControl
    role="tabs"
    selection={layout()}
    options={[
      { value: "list", label: "List" },
      { value: "grid", label: "Grid" },
    ]}
    onSelectionChange={setLayout}
  />
</Host>

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

`SegmentedControl`

View source

SegmentedControl(props: SegmentedControlProps): NativeNode

testIDstring—

Stable identifier exposed to macOS accessibility and UI testing.

string

View source

modifiersViewModifier[]—

SwiftUI modifiers, applied in array order.

ViewModifier[]

View source

selectionstring—

Controlled selected option value.

string

View source

optionsreadonly PickerOption[]—

Declares options. Reactive JSX expressions update this property in place.

readonly PickerOption[]

View source

labelstring—

Declares label (optional). Reactive JSX expressions update this property in place.

string

View source

onSelectionChange(selection: string, event: QuickGuiEvent) => void—

Declares onSelectionChange (optional). Reactive JSX expressions update this property in place.

(selection: string, event: QuickGuiEvent) => void

View source

ref((node: NativeNode) => void) | NativeNode—

Declares ref (optional). Reactive JSX expressions update this property in place.

((node: NativeNode) => void) | NativeNode

View source

roleSegmentedControlRole—

Use `tabs` for Xcode-style neutral segmented tab navigation on macOS 27.

SegmentedControlRole

View source