SegmentedControl

이 콘텐츠는 아직 번역되지 않았습니다.

A choice between a few views or modes, all visible at once.

The frame above shows the real web components, in the mode this site is in.

The design preview shows it next to every other web component.

When to use it

The selected segment is outlined as well as filled, so the choice does not depend on telling two greys apart.
On the web it is a group of native radio buttons, so the arrow keys move between segments.

Example

import { SegmentedControl } from "@acme/ui";

<SegmentedControl
  aria-label="Period"
  options={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
  ]}
  value={period}
  onChange={setPeriod}
/>

Options

The web component’s props. The other platforms take the same options under their own naming conventions.

Prop	Type	Notes
`options`	`readonly { value: Value; label: string }[]`	Required.
`value`	`Value`	Required.
`onChange`	`(value: Value) => void`	Required.
`aria-label`	`string`	Required. Says what is being chosen.
`fullWidth`	`boolean`	Stretches to the width of its container.

Source

Platform	File
Web (React)	`packages/ui/src/SegmentedControl.tsx`
Desktop (GPUI)	`crates/acme-ui/src/controls.rs`
React Native	`packages/ui-native/src/SegmentedControl.tsx`
Compose Multiplatform	`kotlin/ui/src/commonMain/kotlin/acme/ui/SegmentedControl.kt`