Responsive Segmented Or Select

ProNew

One choice control that shows a segmented control when the options fit in the available width and a select when they do not, measured with a ResizeObserver, keeping the same value, label and keyboard behaviour in both. Use this when a short list of options must work in wide and narrow containers.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

label

minSegmentWidth88

Guide and examples

When to use it

Use it for view modes, ranges and sort orders in toolbars that live in sidebars, cards and full pages, where the same control should be buttons when there is room and a dropdown when there is not.

Do not use it when there are more than six options or the labels are long. Always use a select.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

| Prop | Type | Default | Description | | ----------------- | ------------------------- | -------------- | ---------------------------------------------------------------- | ------ | ------------- | | options | { value, label }[] | - | The choices. | | value | string | - | Selected value (controlled). | | defaultValue | string | first | Initial value. | | onValueChange | (value: string) => void | - | Runs on change. | | label | string | - | Visible label, shared by both modes. | | minSegmentWidth | number | 88 | Width in pixels each segment needs; below it the select is used. | | mode | "auto" \\ | "segmented" \\ | "select" | auto | Force a mode. |

Accessibility

Segmented mode is a ToggleGroup (single) named by the label; select mode is the Radix select with the same name.
The mode is chosen from the container width, not the window, so a narrow sidebar on a wide screen gets the select.
The switch happens without moving focus or changing the value; a focused control is simply replaced by its twin and the value is unchanged.
With mode="auto" the first render (before measuring) is the segmented control on the server and the correct one after mount.

Testing

The pattern ships with a Testing Library test (responsive-segmented-or-select.test.tsx) that covers choosing in both modes, the mode following the container width and a forced mode.

Guide and examples

When to use it

Use it for view modes, ranges and sort orders in toolbars that live in sidebars, cards and full pages, where the same control should be buttons when there is room and a dropdown when there is not.

Do not use it when there are more than six options or the labels are long. Always use a select.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Accessibility

Segmented mode is a ToggleGroup (single) named by the label; select mode is the Radix select with the same name.
The mode is chosen from the container width, not the window, so a narrow sidebar on a wide screen gets the select.
The switch happens without moving focus or changing the value; a focused control is simply replaced by its twin and the value is unchanged.
With mode="auto" the first render (before measuring) is the segmented control on the server and the correct one after mount.

Testing

The pattern ships with a Testing Library test (responsive-segmented-or-select.test.tsx) that covers choosing in both modes, the mode following the container width and a forced mode.