#Segmented

A toggle control for switching between options, similar to a button group or radio tabs.

#When to Use

• To switch between views or filter modes
• As an alternative to radio buttons or tabs
• For compact option selection controls

#Import

import { Segmented } from "orizon";

#Examples

#Basic

<Segmented options={["Daily", "Weekly", "Monthly"]} />

#Block

<Segmented block options={["Map", "Satellite", "Terrain"]} />

#Sizes

<Segmented size="large" options={["Large", "Options"]} />
<Segmented options={["Default", "Options"]} />
<Segmented size="small" options={["Small", "Options"]} />

#Disabled

<Segmented
  options={[
    { label: "Active", value: "active" },
    { label: "Disabled", value: "disabled", disabled: true },
    { label: "Also Active", value: "also" },
  ]}
/>

#API

#SegmentedProps

• options — (string | SegmentedOption)[] — Option list
• value — string | number — Selected value (controlled)
• defaultValue — string | number — Default selected value
• onChange — (value: string | number) => void — Selection callback
• block — boolean — Full-width mode (default: false)
• disabled — boolean — Disable all options (default: false)
• size — "large" | "middle" | "small" — Control size (default: "middle")

#SegmentedOption

• label — ReactNode — Display text
• value — string | number — Option value
• icon — ReactNode — Option icon
• disabled — boolean — Disable this option