BottomSheetForm

BottomSheetForm is a user interface pattern that presents a form within a bottom sheet—an overlay panel that slides up from the bottom edge of the screen. It is used to collect input without fully obscuring the underlying content, helping users complete tasks quickly while maintaining context.

Typically accessed from a primary action such as a floating action button or a list item, the bottom sheet can be modal or persistent. In a modal bottom sheet, the sheet must be dismissed to return to the previous screen, and a scrim dims the background. In a persistent bottom sheet, the form remains available alongside content and can be expanded or collapsed as needed. The sheet may be draggable and often supports swipe-to-dismiss.

Common features include a clear header or title, a scrollable form area, labeled input fields, validation feedback, and action buttons such as Cancel and Submit. The sheet should manage focus by placing the cursor in the first field when opened and returning focus to the previous element on close. On submission, the sheet typically closes with a visible success message or state change. Visual design should emphasize readability, adequate contrast, and accessible touch targets.

Design considerations involve responsive height behavior, keyboard handling on mobile to prevent fields from being obscured, and a logical tab order. Accessibility should include appropriate ARIA roles or platform-specific semantics, and error messages should be announced to assistive technologies without obstructing the form flow.

Implementation approaches vary by platform. On Android, BottomSheetDialogFragment can host the form; on web, CSS and JavaScript manage the sheet animation and focus handling; cross-platform frameworks provide corresponding components. BottomSheetForm is especially useful for quick data entry while preserving screen context, but may be less suitable for long, complex forms on smaller devices.