Standard duskmoon implemented 7 demos

Segmented

Segmented switches between a small number of sibling modes.

Import @duskmoon-dev/components/segmented

5 API sections

12 documented props

5 behavior scenarios

Key API

optionsvaluedefaultValueonChangedisabledblock

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Segmented is most often configured through `options`, `value`, `defaultValue`, `onChange`.

Covered behavior

Renders string options with DuskMoon segmented classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Segmented from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Segmented } from "@duskmoon-dev/components/segmented";

export function Example() {
  return (<Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>);
}

Preview

Renders string options with DuskMoon segmented classes

test-backed

Segmented scenario from the component test coverage: renders string options with duskmoon segmented classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Segmented } from "@duskmoon-dev/components/segmented";

export function SegmentedRendersStringOptionsWithDemo() {
  return (<Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>);
}

Preview

Supports object options and default selection

test-backed

Segmented scenario from the component test coverage: supports object options and default selection.

Source

import "@duskmoon-dev/components/styles.css";
import { Segmented } from "@duskmoon-dev/components/segmented";

export function SegmentedSupportsObjectOptionsAndDemo() {
  return (<Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>);
}

Preview

Calls onChange with selected value

test-backed

Segmented scenario from the component test coverage: calls onchange with selected value.

Source

import "@duskmoon-dev/components/styles.css";
import { Segmented } from "@duskmoon-dev/components/segmented";

export function SegmentedCallsOnChangeWithSelectedDemo() {
  return (<Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>);
}

Preview

Supports className, block, size, and disabled

test-backed

Segmented scenario from the component test coverage: supports classname, block, size, and disabled.

Source

import "@duskmoon-dev/components/styles.css";
import { Segmented } from "@duskmoon-dev/components/segmented";

export function SegmentedSupportsClassNameBlockSizeDemo() {
  return (<Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>);
}

Preview

Forwards root ref

test-backed

Segmented scenario from the component test coverage: forwards root ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Segmented } from "@duskmoon-dev/components/segmented";

export function SegmentedForwardsRootRefDemo() {
  return (<Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>
</div>

<div data-theme="moonlight">
  <Segmented
  options={["Overview", "Usage", "API"]}
  defaultValue="Usage"
  size="lg"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Segmented. Start with `options`, `value`, `defaultValue`, `onChange` for common usage.

Types: packages/components/src/components/segmented/Segmented.types.ts Scenarios: packages/components/src/components/segmented/Segmented.test.tsx

SegmentedProps interface extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onChange" >

Prop	Type	Required	Description
`options`	`SegmentedOption[]`	Yes	options configures Segmented.
`value`	`SegmentedValue`	No	value configures Segmented.
`defaultValue`	`SegmentedValue`	No	defaultValue configures Segmented.
`onChange`	`(value: SegmentedValue) => void`	No	onChange configures Segmented.
`disabled`	`boolean`	No	disabled configures Segmented.
`block`	`boolean`	No	block configures Segmented.
`size`	`SegmentedSize`	No	size configures Segmented.

SegmentedOptionObject interface

Prop	Type	Required	Description
`label`	`ReactNode`	Yes	label configures Segmented.
`value`	`SegmentedValue`	Yes	value configures Segmented.
`icon`	`ReactNode`	No	icon configures Segmented.
`disabled`	`boolean`	No	disabled configures Segmented.
`className`	`string`	No	className configures Segmented.

SegmentedValue type

string | number

SegmentedSize type

"sm" | "md" | "lg"

SegmentedOption type

SegmentedValue | SegmentedOptionObject