SegmentedControl

A compact single-selection control with native radio submission and bounded overflow.@gemologic/sheen · forms

Playground

orientation

size

overflowBehavior

Report period

DayWeekMonth

<SegmentedControl label="Report period" name="period" options={[{ value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }]} defaultValue="week"  orientation="horizontal" overflowBehavior="scroll" size="sm"/>

Variant matrix

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/SegmentedControl.tsx

Tokens

--sheen-color-bg-inset
--sheen-color-bg-hover
--sheen-color-accent-subtle
--sheen-color-accent-fg
--sheen-color-focus-ring

Accessibility

Role: radiogroup and native radioKeyboard: Tab, Shift+Tab, Arrow keys, Home, End, Space

Do

Use for a short set of mutually exclusive peer views or modes.

Do not

Do not use segments for independent toggles or a long searchable taxonomy.

Generated props

Name	Type	Default	Description
`id`	`string`	—	Root fieldset ID used to derive stable relationships.
`ref`	`HTMLFieldSetElement \| ((element: HTMLFieldSetElement) => void)`	—	Native root fieldset reference.
`name` *	`string`	—	Required nonempty native radio-group name.
`label` *	`string`	—	Required visible group legend.
`options` *	`readonly SegmentedControlOption[]`	—	Ordered unique values with nonempty labels and optional disabled state.
`value`	`string \| null`	—	App-owned selection, or null for no selection.
`defaultValue`	`string \| null`	—	Captured uncontrolled selection restored on uncanceled form reset.
`onValueChange`	`(value: string \| null) => void`	—	Receives requested committed selection changes.
`description`	`string`	—	Supporting instructions associated with the group.
`error`	`string`	—	Associated error and invalid state.
`readOnly`	`boolean`	`false`	Keeps the group focusable and submitted while rejecting changes.
`required`	`boolean`	`false`	Requires one enabled selection for native validation.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Visual and keyboard orientation.
`size`	`"sm" \| "md"`	`sm`	Compact or standard segment height.
`overflowBehavior`	`"scroll" \| "wrap"`	`scroll`	Scrolls one line by default or wraps when the app permits height growth.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.