Components
Drawer
A fully customizable and accessible drawer component for modern, responsive designs.
Introduction
The Drawer
component is a versatile sliding panel for mobile and web applications. It can serve as a simple overlay or a bottom-drawer for mobile-friendly designs.
Default Use Case: Simple Drawer
Installation
Install the Drawer
component using the following command:
File Structure
drawer.tsx
Prop Types
Prop | Type | Default |
---|---|---|
aria-label | string | - |
aria-labelledby | string | - |
announcePosition | boolean | false |
open | boolean | - |
onOpenChange | (open: boolean) => void | - |
Features
- Customizable Positions:
- Display drawers as simple overlays or bottom drawers for mobile screens.
- Accessible:
- Fully ARIA-compliant with support for
aria-label
andaria-labelledby
.
- Fully ARIA-compliant with support for
- Keyboard Support:
- Fully navigable with keyboard inputs.
- Flexible Content:
- Supports headers, descriptions, and customizable footers.
Accessibility
The Drawer
component is designed to meet the highest accessibility standards:
- ARIA Roles:
- Uses
role="dialog"
for screen reader support.
- Uses
- Screen Reader Announcements:
- Optionally announce the position of the drawer.
- Keyboard Navigation:
- Navigate the drawer using
Tab
,Escape
, and focusable controls.
- Navigate the drawer using
Conclusion
The Drawer
component is a modern, responsive, and accessible solution for creating sliding panels. With built-in keyboard navigation and flexible content options, it is perfect for any web or mobile application.