SegmentedControl

SegmentedControl

<SegmentedControl defaultSelectedKeys={['day']} aria-label="Range">
  <Segment id="day">Day</Segment>
  <Segment id="week">Week</Segment>
  <Segment id="month">Month</Segment>
</SegmentedControl>

Install: @helixui/core

import { SegmentedControl, Segment } from '@helixui/core'

status: stable · since: 0.1.0

Tags: toggle-group, tabs, choice

Anatomy

[ Day ][ Week ][ Month ]   ← exclusive choice (one filled)

Layout

• display — inline-flex
• width — content
• height — content
• intrinsicSize — pill row, ~28-36px tall
• stackable — false
• fullBleed — false

Visual

A pill-shaped row of equal-width segments with a sliding active background. Active segment uses elevated surface; inactive use subtle background.

Props

Name	Type	Default	Description
size	'sm' | 'md'	md	Control height.
selectionMode	'single' | 'multiple'	single	Selection model.
disallowEmptySelection	boolean	true	Prevent unselecting the last item in single mode.
selectedKeys	Set<string>	—	Controlled selection.
defaultSelectedKeys	Iterable<string>	—	Uncontrolled initial selection.
onSelectionChange	(keys: Set<string>) => void	—	Selection change handler.

Slots

• children — Segment components

Tokens used

color.bg.action.neutral.default, color.bg.surface.default, color.text.primary, color.text.secondary, color.border.focus, radius.md, space.3, font.family.sans, font.size.xs, font.size.sm, font.weight.medium, shadow.sm

Accessibility

Role: radiogroup

Keyboard

Key	Action
ArrowLeft	Move focus left.
ArrowRight	Move focus right.
Space	Selects focused segment.

Notes

• For 5+ options, prefer Tabs or a Select.

Composes with

Component	Relation	Note
Tabs	alternative	Tabs for in-page section switching; SegmentedControl for compact view modes.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

view mode picker

“segmented control Day / Week / Month”

<SegmentedControl value={mode} onChange={setMode}>
  <Segment value="day">Day</Segment>
  <Segment value="week">Week</Segment>
  <Segment value="month">Month</Segment>
</SegmentedControl>

Related

• Tabs