Sheet

Use Sheet

A bottom-aligned modal for short tasks, navigation and touch-friendly choices.

"use client";

import { FloodRoot, Sheet, Button, Field, Input } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Sheet title="Project settings" trigger={props => <Button {...props}>Open settings</Button>}>
        <Field label="Project name">{control => <Input {...control} defaultValue="Flood" />}</Field>
      </Sheet>
    </FloodRoot>
  );
}

Design notes

• Sheet shares Drawer's modal semantics, dismissal, focus restoration, scrollable body and optional footer. Its scrollbar fits in the panel padding. Placement is always bottom.
• The panel grows with content up to its size limit. Keep actions that must remain visible in the footer and use ListBox for selectable options.
• Use a sheet for touch navigation or short choices that benefit from a wider target. Anchored popovers and selects remain useful on desktop. Available in 0.2.12.

API reference