View toggle

View toggle is for switching between 1-3 views of content.

Install
npm install @pluralsight/ps-design-system-viewtoggle
Import
import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'

Examples

Toggling

View toggles are used when there are just a couple options to switch between. Use a Tab component when more options exist.

import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import React from 'react'

function Example() {
  return (
    <ViewToggle>
      <ViewToggle.Option active>Option 1</ViewToggle.Option>
      <ViewToggle.Option>Option 2</ViewToggle.Option>
    </ViewToggle>
  )
}

export default Example

More options

Make a toggle with up to 3 options.

import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import React from 'react'

function Example() {
  return (
    <ViewToggle>
      <ViewToggle.Option>Option 1</ViewToggle.Option>
      <ViewToggle.Option>Option 2</ViewToggle.Option>
      <ViewToggle.Option active>Option 3</ViewToggle.Option>
    </ViewToggle>
  )
}

export default Example

Long labels

View toggles are used when there are just a couple options to switch between. Use a Tab component when more options exist.

import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import React from 'react'

function Example() {
  return (
    <ViewToggle>
      <ViewToggle.Option active>Option 1</ViewToggle.Option>
      <ViewToggle.Option>
        Option 2 that is such long you'll never see the end of it
      </ViewToggle.Option>
    </ViewToggle>
  )
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Tabs

Props

ViewToggle

Name	Type	Description	Default
`children`	`ViewToggle.Option[]`	options to appear in toggle
`onSelect`	`function`	triggered when an option is clicked

ViewToggle.Options

Name	Type	Description	Default
`active`	`boolean`	marks as selected	`first option is active`