side- Type
"top" | "right" | "bottom" | "left"- Default
"right"- Description
- The screen edge the sheet opens from.
Components / Overlay
Sheet
பக்கப் பலகம்
Sheets slide in from an edge for secondary tasks that need more room than a popover but should not take the user away from the current page.
தற்போதைய பக்கத்தை விட்டு செல்லாமல் விவரம், வழிசெலுத்தல், குறுகிய படிவம் போன்ற பணிகளை செய்ய பக்கப் பலகம் உதவும்.
Detail sheet
Component preview
Citizen detailsகுடிமக்கள் விவரங்கள்Bottom sheet
Component preview
Mobile navigationமொபைல் வழிசெலுத்தல்Anatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Trigger
தூண்டி<button>Trigger element that opens the sheet on interaction. Can wrap any element via asChild — buttons, links, or menu items. Receives aria-haspopup for accessibility.
2
Panel
பலகம்required<div>Main slide-in panel anchored to a screen edge (right default, supports left/top/bottom). Focus trapped inside while open. Escape closes. Width defaults to sm:max-w-lg. Slide transition animation.
3
Header
தலைப்புrequired<div>Container for SheetTitle (required for aria-labelledby) and SheetDescription. Title clearly states the panel purpose. In Tamil, use natural phrasing for the task name.
4
Footer
செயல்கள்<div>Sticky footer bar keeping action buttons accessible during scroll. Primary action positioned right, cancel left. For Tamil UIs, label buttons in Tamil first.
API
Props
open- Type
boolean- Default
- -
- Description
- Controlled open state.
onOpenChange- Type
(open: boolean) => void- Default
- -
- Description
- Runs when the sheet opens or closes.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | The screen edge the sheet opens from. |
open | boolean | - | Controlled open state. |
onOpenChange | (open: boolean) => void | - | Runs when the sheet opens or closes. |
Best practices
Use Sheet for secondary actions and detail views
இரண்டாம் நிலை செயல்கள் மற்றும் விவர பார்வைக்கு Sheet பயன்படுத்தவும்
Sheets work well for filter panels, mobile navigation, and detail drawers that don't take users away from the current page.
வடிகட்டி பலகம், மொபைல் வழிசெலுத்தல், விவர காட்சி போன்றவற்றுக்கு Sheet மிகவும் பொருத்தமானது.
Don't use Sheet for destructive confirmations
அழிவுகரமான உறுதிப்படுத்தல்களுக்கு Sheet பயன்படுத்தாதே
Sheets can be dismissed by clicking outside — use AlertDialog for destructive actions that must be explicitly confirmed.
Sheet-ஐ வெளியில் கிளிக் செய்வதன் மூலம் மூடலாம் — அழிவுகரமான செயல்களுக்கு AlertDialog பயன்படுத்தவும்.
Always provide SheetTitle for screen readers
திரை வாசகர்களுக்காக எப்போதும் SheetTitle வழங்கவும்
SheetTitle is required for aria-labelledby — without it, screen reader users won't know what the sheet is about.
SheetTitle aria-labelledby-க்கு தேவை — இல்லாவிட்டால் திரை வாசகர் பயனர்களுக்கு Sheet என்னவென்று புரியாது.
Don't make sheet content taller than the viewport
Sheet உள்ளடக்கத்தை திரைக்கும் உயரமாக வைக்காதே
Sheet content should scroll internally — never let it overflow the viewport height without overflow-y-auto.
Sheet உள்ளடக்கம் உள்ளே உருட்ட வேண்டும் — திரை உயரத்தை மீறினால் overflow-y-auto சேர்க்கவும்.