Premium & Brand

Segmented Control

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

Import

tsx

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

bash

npx cooud-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>

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 Cooud 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`	—	—

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.