Skip to content
Yuzur1ha Open

Component referenceDraft

Segmented

Segmented presents closely related alternatives as one compact control. It keeps a single selected value.

Updated

Design notes

Use concise labels and leave enough room for every option. Keyboard navigation and active styling should remain predictable.

Design sourceOpen in Figma

Segmented design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx
Appearance
system

content/components/segmented/demo.tsx

import { useState } from "react"
import { Segmented } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function SegmentedDemo() {
  const [value, setValue] = useState("system")
  return (
    <>
      <Segmented
        label="Appearance"
        value={value}
        onChange={setValue}
        options={[
          { value: "system", label: "System" },
          { value: "light", label: "Light" },
          { value: "dark", label: "Dark" },
        ]}
      />
      <DemoResult>{value}</DemoResult>
    </>
  )
}

API

Segmented

A controlled radio group. T extends string and is shared by value, options and onChange. Every option value must be unique.

SegmentedProps<T>
PropertyTypeRequiredDefaultDescription
labelstringYes—Accessible group label, rendered as a visually hidden legend.
valueTYes—Currently selected option value of type T.
onChange(value: T) => voidYes—Called with the selected option value of type T.
optionsreadonly { value: T; label: string }[]Yes—Ordered radio options with unique string values of type T and visible labels.

No custom imperative methods. Event callbacks are listed as properties.