Content switcher

The content switcher is used to toggle between two or more content sections within the same space on screen. It manipulates the content shown following an exclusive or “either/or” pattern.

Overview
Related components
Feedback

CodeSandbox React Angular Vue Vanilla


<ContentSwitcher onChange={console.log}>
  <Switch name={'first'} text='First section' />
  <Switch name={'second'} text='Second section' />
  <Switch name={'third'} text='Third section' />
</ContentSwitcher>


<ContentSwitcher onChange={console.log}>
  <Switch name={'first'} text='First section' />
  <Switch name={'second'} text='Second section' />
  <Switch name={'third'} text='Third section' />
</ContentSwitcher>

Overview

The content switcher is used to toggle between two or more content sections within the same space on screen. Only one section can be shown at a time.

Text

Be concise and specific. Titles have a max of two words.

Default selection

Based on usage, there should be a default selection. The default selection is always the first option in a switcher.

Content switcher vs. toggle

The content switcher is used for large groups of content, as opposed to the toggle which is meant for a “yes/no” or “on/off” binary decision.

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Edit this page on GitHub

Components: Code snippet

Content switcher: Style

Overview

Text

Default selection

Related components

Content switcher vs. toggle

Feedback