Dialog is a low-level primitive that helps achieve ecosystem-agnostic, fully accessible dialogs that can be styled as needed.

A dialog consists of a container element and an optional title. useDialog handles exposing this to assistive technology using ARIA. It can be combined with other primitives to create modal dialogs, popovers, and other types of overlays.

Import

import {Dialog} from '@fuegokit/react'

Usage

function MyDialog() {
  return (
    <ModalTrigger label="Open Dialog">
      {close => (
        <Dialog role="alertdialog" title="Enter your name">
          <form style={{display: 'flex', flexDirection: 'column'}}>
            <label htmlFor="first-name">First Name:</label>
            <input id="first-name" />
            <label htmlFor="last-name">Last Name:</label>
            <input id="last-name" />
            <Button onPress={close} style={{marginTop: 10}}>
              Submit
            </Button>
          </form>
        </Dialog>
      )}
    </ModalTrigger>
  )
}

render(<MyDialog />)

function MyDialog() {
  return (
    <ModalTrigger label="Open Dialog">
      {close => (
        <Dialog role="alertdialog" title="Enter your name">
          <form style={{display: 'flex', flexDirection: 'column'}}>
            <label htmlFor="first-name">First Name:</label>
            <input id="first-name" />
            <label htmlFor="last-name">Last Name:</label>
            <input id="last-name" />
            <Button onPress={close} style={{marginTop: 10}}>
              Submit
            </Button>
          </form>
        </Dialog>
      )}
    </ModalTrigger>
  )
}

render(<MyDialog />)

Accessibility

If a dialog does not have a visible title element, an aria-label or aria-labelledby prop must be passed instead to identify the element to assistive technology.

The dialog's title is used for aria-labelledby, and the dialog's description is used for aria-describedby.

The aria-modal="true" attribute is used to inform screen readers that the rest of the content on the page is inert.