Segmented control

Two or three short options that shape one field or a dense toolbar.

Get Pro to installPro9 blocksReact, Vue and Figma
MCPConnect the MCP server
Default view (Optional)

Choose how tasks are laid out when the project opens.

You can switch views any time from the toolbar.

More in Tabs#

Grouped tabs

Page-level view switching: 2 to 5 peer views of one object, switched in place

Grouped tabs, counts

Views that carry how many items they hold, where acting on an item moves it to another view

Grouped tabs, priority

More views than a row can hold, without wrapping or scrolling the tab list

Tabs in place

The test the page leads with: a control that re-renders one region and leaves the page alone

Tabs in place, underline

Page-level tabs in a header, for views that load: Activity, Members, Billing

Tabs in place, morph

Views of very different heights, where the panel should say which way the choice went

Segmented control

Two or three short options that shape one field or a dense toolbar

Segmented control, preview

A choice that is about layout, where seeing it beats reading it

Segmented control, toolbar

A dense toolbar that switches the view under it between layouts

When to use#

  • Two to five peer views of one object, switched in place with no change of address.
  • A panel whose heading, meta and primary action must hold still while the content beneath them changes.
  • A field with two or three short options that shape what it shows: a segmented control rather than full tabs.
  • A dense toolbar where the options are short enough to sit side by side without truncating.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.