Content switcher

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>

General guidance

Content switcher manipulates the content shown following an exclusive or “either/or” pattern. It 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.

Edit this page on GitHub

Components: Code snippet

Content switcher: Style

General guidance

Text

Default selection

Related components

Content switcher vs. toggle