DocsComponents
Sheet
One dialog mechanism for filters and the “More” menu.
Filters
Type of activity
EducationSportsArts
Format
One-offWeeklyCamp
Filters
Type of activity
EducationSportsArts
- 1Scrim: the rest of the screen is dimmed (50 % black) and inactive; a click closes the sheet
- 2Sheet: white, top corners 24 px, attached to the bottom edge
- 3Header: heading (Sora 24 in panel, 18 / 600 in menu) and a 44 px X
- 4Body: scrolls on its own, the page underneath does not move
- 5Footer: top line, secondary action left, main action right
Variants
One mechanism, two variants. The panel holds the activity filters on phones; the menu holds the “More” items of the organiser’s bottom navigation.
Filters
Format
One-offWeeklyCamp
More
States
The sheet is open or closed; its X has the states. In the panel, hover gives the X a light blue background and deep blue icon; in the menu, the 2 px border turns deep blue. Focus shows a 3 px ring. Hover and focus are forced below.
Rest Hover Focus
Rest Hover Focus
API reference
Controlled by open and onClose; the browser does the rest.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | – | Opens the sheet with showModal() and closes it when false. |
onClose | function | – | Called after Esc, a click on the dimmed background, the X or close() from the content. |
title | text | – | Heading of the sheet; it also names the dialog (aria-labelledby). |
closeLabel | string | – | Accessible name of the X button. |
footer | content | – | Optional footer with a top line, e.g. “Clear all” and “Show N activities”. |
variant | "panel" | "menu" | "panel" | panel: filters, scrolling body, up to 88 % of the height. menu: “More”, up to 85 %. |
children | content | – | Body of the sheet. |
className | string | – | Extra classes for the dialog. |
Accessibility
- A native dialog opened with showModal(): the browser traps focus inside, Esc closes it, focus returns to the element that opened it and the rest of the page becomes inert.
- The heading names the dialog through aria-labelledby, so a screen reader announces “Filters, dialog”.
- The X is a 44 × 44 px button with a text name (closeLabel).
- A click on the dimmed background closes the sheet, but it is never the only way: Esc and the X always work.
- Contrast: heading and body 20.2:1 on white; the footer keeps the safe-area inset, so buttons never sit under the phone’s home bar.
Do and don’t
More
More