Segmented

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download segmented -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Segmented } from "@/components/ui/segmented";
import * as React from "react";
export default function SegmentedExample() {
  const [value, setValue] = React.useState("overview");
  return (
    <Segmented
      options={
        false
          ? [
    { label: "Overview", value: "overview" },
    { label: "Settings", value: "settings" },
].map((option) => ({
              ...option,
              disabled: true,
            }))
          : [
    { label: "Overview", value: "overview" },
    { label: "Settings", value: "settings" },
]
      }
      value={value}
      onChange={setValue}
    />
  );
}

Props API

Examples

Default

import { Segmented } from "@/components/ui/segmented";
import * as React from "react";
export default function SegmentedExample() {
  const [value, setValue] = React.useState("overview");
  return (
    <Segmented
      options={[
    {
        label: "Overview",
        value: "overview",
    },
    {
        label: "Settings",
        value: "settings",
    },
]}
      value={value}
      onChange={setValue}
    />
  );
}

Icons

import { Segmented } from "@/components/ui/segmented";
import * as React from "react";
export default function SegmentedExample() {
  const options = [
    { label: "Profile", value: "profile", icon: "User" as const },
    { label: "Team", value: "team", icon: "Users" as const },
    { label: "Settings", value: "settings", icon: "Settings" as const },
  ];
  const [value, setValue] = React.useState("profile");
  return <Segmented options={options} value={value} onChange={setValue} />;
}

Three Options

import { Segmented } from "@/components/ui/segmented";
import * as React from "react";
export default function SegmentedExample() {
  const options = [
    { label: "Day", value: "day" },
    { label: "Week", value: "week" },
    { label: "Month", value: "month" },
  ];
  const [value, setValue] = React.useState("week");
  return <Segmented options={options} value={value} onChange={setValue} />;
}

Disabled

import { Segmented } from "@/components/ui/segmented";
import * as React from "react";
export default function SegmentedExample() {
  const options = [
    { label: "Active", value: "active" },
    { label: "Archived", value: "archived" },
    { label: "Deleted", value: "deleted", disabled: true },
  ];
  const [value, setValue] = React.useState("active");
  return <Segmented options={options} value={value} onChange={setValue} />;
}

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.