Bottom Search Sheet
Bottom Search Sheet turns a lower search pill into a keyboard-aware results surface. It keeps search close to the thumb while giving the query enough room to remain legible on a small screen.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
Bottom Search Sheet turns a lower search pill into a keyboard-aware results surface. It keeps search close to the thumb while giving the query enough room to remain legible on a small screen.
Use when
- Search is contextual to the current screen rather than the primary route.
- Results need a little more room than an inline field provides.
Interaction
Tap the pill, type in the focused field and choose a result. Escape, Cancel, close and the backdrop all return to the original trigger.
Accessibility
Use a labelled dialog, a real input and readable result buttons. Restore focus to the trigger and announce result changes without making the entire page live.
Reduced motion
Open and close the sheet immediately; preserve query, result order and focus restoration.
Tune
- Keep the result set short or virtualize it in a real product.
- Account for the visual viewport and safe-area inset.
Source: packages/skills/mobile/bottom-search-sheet.md