Detent Sheet
Detent Sheet exposes three named heights—peek, half and full—as stable reading destinations. The drag handoff is predictable because the user can also choose each detent with buttons or arrow keys.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
Detent Sheet exposes three named heights—peek, half and full—as stable reading destinations. The drag handoff is predictable because the user can also choose each detent with buttons or arrow keys.
Use when
- A task benefits from preview, working and full-reading heights.
- Users need to move between sheet sizes without losing the underlying context.
Interaction
Drag the handle upward or downward, choose Peek/Half/Full, press Escape or close explicitly. A downward drag from Peek dismisses the sheet.
Accessibility
Treat the handle as a labelled slider with a small, finite range. Provide named detent buttons so the gesture is never the only route.
Reduced motion
Switch heights immediately and keep the current detent text visible.
Tune
- Choose heights based on content, not device fashion.
- Keep the full state below the safe readable viewport.
Source: packages/skills/mobile/detent-sheet.md