EXEPERTAI LAB
Sign inOpen app
← Browse gallery
Actions·@exepert/ui / SegmentedControl

Segmented Control

A compact single-choice switch for sibling views or modes.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

View switcher

A selected view is visible without opening a menu, and the default state can be changed with arrow keys.

Open in Playground ↗
Starting preview…
import { SegmentedControl } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <SegmentedControl label="Viewport" options={[{ value: "grid", label: "Grid" }, { value: "list", label: "List" }, { value: "table", label: "Table" }]} defaultValue="grid" onValueChange={() => {}} />
  );
}