# Sheet

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

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `title` | `string` | `Required` |
| `description` | `string` | `—` |
| `trigger` | `(props: OverlayTriggerProps) => ReactNode` | `Required` |
| `children` | `ReactNode` | `—` |
| `open` | `boolean` | `—` |
| `defaultOpen` | `boolean` | `—` |
| `onOpenChange` | `(open: boolean) => void` | `—` |
| `disabled` | `boolean` | `—` |
| `closeLabel` | `string` | `—` |
| `closeOnOutsideClick` | `boolean` | `—` |
| `initialFocusRef` | `RefObject<HTMLElement \| null>` | `—` |
| `getFallbackFocus` | `() => HTMLElement \| null` | `—` |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
| `footer` | `ReactNode` | `—` |
| `Native HTML props` | `Omit<Omit<HTMLAttributes<HTMLDialogElement>, "children" \| "title" \| "role">, "side">` | `Forwarded` |