Component registry
Sheet
A modal task surface: one heading, one close action and scrollable content.
Live web demo
Web source: openvibe-shared/kit · kit.sheet({ id, title, body })
Anatomy
- handletouch affordance
- headertitle and close
- bodytask controls
Props
title- string
open- boolean
body- content
Behavior and accessibility
- States
- closed · opening · open · closing
- Tokens
- color.bg.raised · color.line.strong · radius.lg
- Keyboard
- Keeps the focused control in view
- Outside tap
- Closes the surface
- Scroll lock
- Locks the page while open
- Reduced motion
- Remove movement; keep the state change.
- Accessibility
- Sheet. Trap focus while open; Escape closes and returns focus. At least 44 × 44 dp or pt for every touch action.
Android · Jetpack Compose
Use ModalBottomSheet with a heading, close control and sheet state.
Material 3 container: SurfaceContainerHigh
iOS · SwiftUI
Use .sheet with a NavigationStack and a toolbar close button.
Example definition
{
"schema": "design.component@1",
"name": "sheet",
"props": {
"title": "Add a site"
}
}