Component registry
Sheet motion
The bottom sheet entrance and exit without moving underlying content.
Live web demo
Web source: openvibe-shared/kit · kit.sheet and ovk-sheet motion
Anatomy
- surfacesheet
- scrimdimmed context
Props
open- boolean
Behavior and accessibility
- States
- closed · opening · open · closing
- Tokens
- --ov-dur-3 · --ov-ease-out
- Keyboard
- Standard focus order
- Outside tap
- No dismissal
- Scroll lock
- Locks the page while open
- Reduced motion
- Crossfade the sheet and scrim.
- Accessibility
- Sheet motion. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.
Android · Jetpack Compose
Use ModalBottomSheet sheetState animation with reduced-motion fallback.
Material 3 container: SurfaceContainerHigh
iOS · SwiftUI
Use native sheet presentation; respect accessibilityReduceMotion.
Example definition
{
"schema": "design.component@1",
"name": "sheet-motion",
"props": {
"open": true
}
}