Toggle

The Toggle component is a flexible and accessible component that allows users to switch between two states. It supports basic toggles, card-style toggles, and draggable toggles, making it suitable for various use cases.

Import

import { Toggle } from 'h2o-library';

Basic Usage

Simple Toggle

<Toggle
  label="Basic Toggle"
  defaultChecked={false}
/>

Card Toggle

<Toggle
  label="Card Toggle"
  isCard
  defaultChecked={true}
/>

Draggable Toggle

<Toggle
  label="Draggable Toggle"
  isCard
  isDraggable
  defaultChecked={false}
/>

Interactive Examples

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

Props

Prop	Type	Default	Description
label	string	-	The label text for the toggle
className	string	-	Additional CSS classes for the toggle
isCard	boolean	false	Whether to render the toggle in a card style
isDraggable	boolean	false	Whether to add a drag handle to the toggle
checked	boolean	-	Whether the toggle is checked
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	-	Callback when the toggle state changes
disabled	boolean	-	Whether the toggle is disabled

Design Considerations

• Clear visual feedback for different states
• Consistent spacing and alignment
• Support for both basic and card styles
• Drag handle integration for card toggles
• Proper contrast for accessibility
• Smooth transitions for state changes
• Custom styling options
• Proper touch targets for mobile devices
• Clear visual hierarchy
• Support for disabled states

Accessibility

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