Content Switch

A versatile content switch component for toggling between different views or options.

The ContentSwitch component provides a clean and intuitive way to switch between different views or options. It supports primary and secondary variants, custom styling, and seamless integration with content areas.

Import

import { ContentSwitch } from 'h2o-library';

Basic Usage

Primary Content Switch

<ContentSwitch
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ]}
  selected="option1"
  variant="primary"
/>

Secondary Content Switch

<ContentSwitch
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ]}
  selected="option1"
  variant="secondary"
/>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Primary Content Switch

Selected: option1

Secondary Content Switch

Selected: option1

Content Switch with Custom Content

Overview Content

This is the overview section with detailed information.

Props

PropTypeDefaultDescription
options{ label: string; value: string; }[]-Array of options with labels and values
selectedstring-Currently selected option value
onChange(value: string) => void-Callback when an option is selected
variant"primary" | "secondary""primary"Visual style variant
classNamestring-Additional CSS classes for the container
optionClassNamestring-Additional CSS classes for individual options

Design Considerations

  • Clear visual hierarchy
  • Consistent spacing and alignment
  • Smooth transitions between options
  • Proper contrast for selected state
  • Hover and focus states
  • Custom styling options
  • Responsive design
  • Support for many options
  • Clear visual feedback
  • Proper touch targets

Accessibility

  • Proper ARIA attributes
  • Keyboard navigation
  • Screen reader support
  • Focus management
  • Clear visual indicators
  • Proper contrast ratios
  • Support for reduced motion
  • Touch target sizes
  • Option associations
  • State announcements
  • Error handling
  • Focus restoration