Premium & Brand

Segmented Control

Single-select toggle row with a thumb that slides between options.

Import

tsx

import { SegmentedControl, SegmentedControlItem } from "@cronus-ui/ui";

bash

npx cronus-ui add segmented-control

Examples

Single select

A thumb that slides between options via a shared layoutId — radiogroup semantics with full arrow-key navigation. Ideal for period filters and view toggles.

Período: 30 dias

tsx

<SegmentedControl defaultValue="30d" aria-label="Período">
  <SegmentedControlItem value="7d">7 dias</SegmentedControlItem>
  <SegmentedControlItem value="30d">30 dias</SegmentedControlItem>
  <SegmentedControlItem value="12m">12 meses</SegmentedControlItem>
</SegmentedControl>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component SegmentedControlDefault layout:inline style:segmented-control {
  value:"Day"
  aria-label:"Range"
  label "Range"
  text "Day"
  text "Week"
}

page "/audit/segmented-control/default" type:custom {
  use SegmentedControlDefault
}

API Reference

Generated from the component's exported types.

SegmentedControlProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value. When provided the component is fully controlled.
`defaultValue`	`string`	—	Initial selected value for the uncontrolled case.
`onValueChange`	`(value: string) => void`	—	Called whenever the selection should change (controlled or not).
`size`	`SegmentedControlSize`	`"md"`	Density of the items. Defaults to `"md"`.
`transition`	`Transition`	`SEGMENTED_THUMB_TRANSITION`	Override the thumb spring (advanced — defaults to the Cronus thumb spring).
`reducedMotion`	`"user" \| "always" \| "never"`	—	How `prefers-reduced-motion` is honoured. Defaults to `"user"` (snap the thumb for users who opt out). Pass `"never"` to always slide it — e.g. a showcase that must demonstrate it — or `"always"` to force the snap.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

SegmentedControlItemProps

Extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange">

Prop	Type	Default	Description
`value`*	`string`	—	The value this option selects. Required and unique within a group.
`children`	`ReactNode`	—	Visible label (text and/or icon).
`disabled`	`boolean`	`false`	Disable selection + skip in keyboard navigation.
`type`	`string`	—	Native type of the underlying element.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`className`	`string`	—	Additional class names merged onto the root.