Components
Toggle Group
A versatile and accessible toggle group component for single and multiple selections, built with Radix UI primitives.
Previews with Code
Example 1: Single Select Toggle Group
Single Select Toggle Group
Example 2: Multi Select Toggle Group
Multi Select Toggle Group
Installation
The Toggle Group component is a lightweight and accessible control for managing single or multiple selections.
Quickly add the component using:
File Structure
Props
The Toggle Group component supports the following props:
| Prop | Type | Default |
|---|---|---|
type | "single" | "multiple" | - |
defaultValue | string | string[] | - |
ariaLabel | string | - |
variant | "default" | "outline" | "default" |
size | "sm" | "default" | "lg" | "default" |
className | string | - |
Features
The Toggle Group component includes the following features:
- Single and Multi-Select Modes:
- Choose between single or multiple selections for the group.
- Customizable Sizes and Variants:
- Includes small (
sm), default, and large (lg) sizes, withdefaultandoutlinevariants.
- Includes small (
- Icon Support:
- Add icons for additional visual feedback.
- Keyboard and Screen Reader Friendly:
- Fully accessible for better usability.
- Responsive Design:
- Adapts to various container sizes seamlessly.
Accessibility
The Toggle Group component is designed with accessibility in mind:
- ARIA Roles:
- Uses proper roles like
buttonfor toggles andgroupfor the container.
- Uses proper roles like
- Keyboard Navigation:
- Use the
Spacekey to toggle items on or off.
- Use the
- Screen Reader Support:
- Descriptive
aria-labelattributes ensure clear communication of the group’s purpose and functionality.
- Descriptive
Conclusion
The Toggle Group component is a versatile and accessible solution for managing single or multiple selections in modern web applications. Its flexibility and customization options make it ideal for text formatting, settings, and other interactive features.