# Popover

A small panel that opens beside its button for settings and filters, closing when you look away.

- Family: Composites, imported from `mizu-ui` or `mizu-ui/composite`
- Docs: https://mizu.user64bit.world/components/popover
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/composite/Popover.tsx

## Usage

```tsx
import { Popover, Checkbox } from "mizu-ui";

export function Example() {
  return (
    <Popover label="Columns">
      <fieldset className="mizu-form-fields">
        <legend className="mizu-field-label">Show columns</legend>
        <Checkbox label="Owner" defaultChecked />
        <Checkbox label="Severity" defaultChecked />
        <Checkbox label="Last updated" />
      </fieldset>
    </Popover>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/popover 0xuser64bit/mizu/checkbox
```

## Props

- `label`: `string`. Button text and the panel's accessible name.
- `children`: `ReactNode`. The panel's content.
- `side / align`: `"bottom" | "top" / "start" | "end"` (default `"bottom" / "start"`). Where the panel opens. It flips to the other side when there is no room.

## Accessibility

Built on the native Popover API: Escape or a click outside closes it and returns focus to the button, which reports aria-expanded. The panel is a non-modal dialog named by its button, and follows the button in the tab order.

## Motion

The panel settles 4px into place; reduced motion opens it still.