Toggle
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Toggle component provides a two-state button for binary choices. Built on Radix UI, it offers consistent styling, accessibility features, and smooth state transitions. Perfect for on/off controls, favorites, bookmarks, and any interface requiring toggle functionality.
Basic Usage
With Text
Controlled Toggle
Different Variants
Default Variant
Outline Variant
Different Sizes
Small
Default
Large
Settings Panel
Interactive Actions
Text Formatting Toolbar
This text will be formatted based on the toolbar selections above.
Active formatting: none
Properties
Toggle
| Property | Type | Description |
|---|---|---|
pressed | boolean | Controlled pressed state of the toggle. |
defaultPressed | boolean | Default pressed state when uncontrolled. |
onPressedChange | (pressed: boolean) => void | Callback fired when pressed state changes. |
disabled | boolean | Whether the toggle is disabled. |
variant | "default" | "outline" | Visual variant of the toggle. |
size | "sm" | "default" | "lg" | Size variant of the toggle. |
className | string | Additional CSS classes for the toggle. |
children | ReactNode | Content of the toggle button. |
asChild | boolean | Render as child element instead of button. |
aria-label | string | Accessible label for screen readers. |
Accessibility
The Toggle component includes comprehensive accessibility features:
- Keyboard Navigation - Space and Enter keys activate the toggle
- Focus Management - Proper focus indicators and handling
- ARIA Support - Full ARIA attributes including pressed state
- Screen Reader Support - Toggle state changes announced
- Semantic HTML - Uses proper button semantics
- High Contrast - Supports high contrast mode and themes
Common Use Cases
The Toggle component is perfect for:
- Settings Controls - On/off switches for application preferences
- Text Formatting - Bold, italic, underline controls in editors
- Interactive Actions - Like, favorite, bookmark buttons
- Visibility Controls - Show/hide content toggles
- Feature Flags - Enable/disable feature controls
- Audio/Video Controls - Mute, play/pause toggles
- Notification Settings - Enable/disable notification types
Best Practices
- Clear Labels - Always provide descriptive aria-labels for screen readers
- Visual Feedback - Ensure clear visual indication of pressed/unpressed states
- Consistent Behavior - Use consistent toggle behavior throughout your app
- Icon Usage - Use recognizable icons that clearly indicate the toggle function
- State Management - Handle controlled vs uncontrolled state appropriately
- Keyboard Support - Ensure proper keyboard navigation and activation
- Touch Targets - Ensure adequate touch target size for mobile devices
- Color Contrast - Maintain sufficient color contrast in all states