Edit a focus
Studio
iOS sheet
A native modal bottom sheet with a centered title, grabber and deliberate entrance.
Preview
In action
When to use
Use it for
- A focused modal task presented from the bottom edge.
- Keep the sheet mounted to preserve form drafts while closed.
Not for
- Claiming the grabber is draggable; it is a visual indicator.
- Using a modal for ordinary page navigation or passive status.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { IOSSheet } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/ios-sheet.
2. Vendor the source
npx @noorddev/vlak-cli add ios-sheet
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/ios-sheet.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { IOSSheet } from "@noorddev/vlak-react";
<IOSSheet title="Edit note" open={open} onOpenChange={setOpen} description="Changes stay on this device."><form id="note-editor">…</form></IOSSheet>Props
IOSSheet
A modal bottom sheet. The platform owns the focus trap and top layer.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | ||
defaultOpen | boolean | false | |
onOpenChange | (open: boolean) => void | ||
onClose | () => void | ||
titlerequired | ReactNode | ||
description | ReactNode | ||
closeLabel | string | "Close sheet" | |
dismissable | boolean | true | |
lightDismiss | boolean | true |
Also accepts Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" | "title">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Uses the native modal focus trap. |
| Escape | Requests closing unless dismissable is false or onCancel prevents it. |
| Enter, Space on Close | Closes a dismissable sheet and restores its trigger when still available. |
Accessibility
- The native dialog is named by its title and optionally described by its description.
- Focus restores on close and unmount; reduced motion removes the entrance animation. Nondismissable sheets omit the close control.
Markup
<dialog class="rs-ios-sheet" aria-labelledby="sheet-title"><div class="rs-ios-sheet-handle" aria-hidden="true"></div><header class="rs-ios-sheet-header"><span></span><h2 class="rs-ios-sheet-title" id="sheet-title">Edit note</h2><button class="rs-ios-sheet-close" type="button" aria-label="Close sheet">×</button></header><div class="rs-ios-sheet-body">Note content</div></dialog>
Classes
.rs-ios-sheet.rs-ios-sheet-open.rs-ios-sheet-handle.rs-ios-sheet-header.rs-ios-sheet-title.rs-ios-sheet-close.rs-ios-sheet-body.rs-ios-sheet-description