Dialog

Modal dialogs with focus trap and backdrop handling.

Props

Scroll Lock Close on Escape Close on Outside Click

Features

🪟 Uses native HTML <dialog> element
🔒 Built-in scroll lock when open
🎯 Focus trap and focus management
🎨 TODO: Animation support

Usage

Builder

<script lang="ts">
  import { Dialog } from "melt/builders";

  const dialog = new Dialog();
</script>

<button {...dialog.trigger}>
  Open Dialog
</button>

<dialog {...dialog.content}>
  Dialog content
</dialog>

API Reference

Constructor Props

The props that are passed when calling

new Dialog()

export type DialogProps = {
  /**
   * If the Dialog is open.
   *
   * When passing a getter, it will be used as source of truth,
   * meaning that the value only changes when the getter returns a new value.
   *
   * Otherwise, if passing a static value, it'll serve as the default value.
   *
   * @default false
   */
  open?: MaybeGetter<boolean | undefined>;

  /**
   * Called when the value is supposed to change.
   */
  onOpenChange?: (value: boolean) => void;

  /**
   * If the dialog should close when clicking escape.
   *
   * @default true
   */
  closeOnEscape?: MaybeGetter<boolean | undefined>;

  /**
   * If the dialog should close when clicking outside.
   * Alternatively, accepts a function that receives the clicked element,
   * and returns if the dialog should close.
   *
   * @default true
   */
  closeOnOutsideClick?: MaybeGetter<boolean | undefined>;

  /**
   * If the dialog should lock the document scroll when open.
   *
   * @default true
   */
  scrollLock?: MaybeGetter<boolean | undefined>;
};

export type DialogProps = {
  /**
   * If the Dialog is open.
   *
   * When passing a getter, it will be used as source of truth,
   * meaning that the value only changes when the getter returns a new value.
   *
   * Otherwise, if passing a static value, it'll serve as the default value.
   *
   * @default false
   */
  open?: MaybeGetter<boolean | undefined>;

  /**
   * Called when the value is supposed to change.
   */
  onOpenChange?: (value: boolean) => void;

  /**
   * If the dialog should close when clicking escape.
   *
   * @default true
   */
  closeOnEscape?: MaybeGetter<boolean | undefined>;

  /**
   * If the dialog should close when clicking outside.
   * Alternatively, accepts a function that receives the clicked element,
   * and returns if the dialog should close.
   *
   * @default true
   */
  closeOnOutsideClick?: MaybeGetter<boolean | undefined>;

  /**
   * If the dialog should lock the document scroll when open.
   *
   * @default true
   */
  scrollLock?: MaybeGetter<boolean | undefined>;
};

Properties

The properties returned from

new Dialog()

closeOnEscape
```
boolean
```
```
boolean
```
closeOnOutsideClick
```
boolean
```
```
boolean
```
scrollLock
```
boolean
```
```
boolean
```

refs

{
  get: (key: "trigger" | "content") => HTMLElement | undefined
  attach: (key: "trigger" | "content") => Attachment<HTMLElement>
  key: any
}

open
```
boolean
```
```
boolean
```

sharedProps

{ "data-open": "" | undefined }

trigger

{
  readonly "data-open": "" | undefined
  readonly "data-melt-dialog-trigger": ""
  readonly onclick: () => void
  readonly type: "button"
}

The trigger element.

content

{
  readonly "data-open": "" | undefined
  readonly "data-melt-dialog-content": ""
  readonly onclose: () => void
}

The element for the dialog itself.