Inspector segmented control

Storybook

A choice between a few options in one row

The name sits on the left and the options as chips at the bar’s end. The selected chip takes a neutral fill, never the action colour. Each option is a native radio, so the set announces as one radiogroup named by the label, arrow keys move the selection, and it submits with a form.

Sizes

The size prop matches Button’s: default is 40px tall and compact is 32px.

Default
Elevation
Compact
Align

Disabled option

Set disabled on one option to take that choice out of the set while the others stay available.

Theme

Disabled

Default
Elevation
Compact
Align

When to use it

Use the inspector segmented control for a setting with two to four short options in a dense panel, usually inside an inspector section. For a free-standing pill strip in a form or a toolbar, such as a view switcher, use Segmented control instead.

tsx
// From the npm package
import { InspectorSegmentedControl } from 'rift-ds/components/InspectorSegmentedControl/InspectorSegmentedControl';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/inspector-segmented-control.json