Modal

Stable

A centered overlay dialog for collecting form input or displaying contextual information. Built on the native HTML5 <dialog> element with DaisyUI styling. For destructive confirmations, use Alert Dialog instead.

API Reference

c-modal

Attribute	Description	Type	Default
`id`	Required for JS control via `showModal()`. Auto-generated when omitted.	string	`—`
`dismissible`	Adds an ✕ close button and allows clicking the backdrop to close	boolean	`False`
`position`	Vertical placement on screen. Use `top` for search dialogs and command palettes	string	`"center"`
`size`	Maximum width of the modal box	string	`"md"`
`label`	Accessible label for the dialog. Sets `aria-labelledby` on the `<dialog>` element (rendered as a visually-hidden heading).	string	`""`
`hx`	Raw HTMX attributes passed to the dialog element	string	`""`

Sub-components

Component	Description	Key Props
`c-modal.header`	Title row with optional description. Renders a bottom border to separate header from body.	`description`
`c-modal.action`	Footer row for action buttons. Flex, end-aligned, with a top border separator.	—

size

xs sm md lg xl

position

center top

Native dialog: built on <dialog>, which provides native focus trapping, Escape key to close, and proper role="dialog" announcement to screen readers.

Focus management: showModal() automatically moves focus into the dialog and returns it to the trigger element when the dialog closes.

Dismissible: always pair the backdrop click-to-close with a visible Cancel/Close button so keyboard users can also exit the dialog.

position="top": best for search dialogs and command palettes — avoids the layout jump that centered dialogs produce when their content height changes.

Examples

Usage

<c-button color="primary" onclick="my_modal.showModal()">Open</c-button>

<c-modal id="my_modal" dismissible>
  <c-modal.header description="Optional subtitle text.">Modal Title</c-modal.header>
  <!-- body content -->
  <c-modal.action>
    <form method="dialog"><c-button variant="outline">Cancel</c-button></form>
    <c-button color="primary">Save</c-button>
  </c-modal.action>
</c-modal>

Edit Profile

<c-button color="primary" onclick="edit_profile_modal.showModal()">Edit Profile</c-button>

<c-modal id="edit_profile_modal" dismissible size="sm">
  <c-modal.header description="Make changes to your profile here. Click save when you're done.">
    Edit Profile
  </c-modal.header>
  <div class="space-y-4">
    <c-input label="Name" placeholder="Pedro Duarte" />
    <c-input label="Username" placeholder="@peduarte" />
  </div>
  <c-modal.action>
    <form method="dialog"><c-button variant="outline">Cancel</c-button></form>
    <c-button color="primary">Save Changes</c-button>
  </c-modal.action>
</c-modal>

Form — Invite Team Member

<c-modal id="invite_modal" dismissible size="sm">
  <c-modal.header description="Send an invitation to a new team member.">
    Invite Team Member
  </c-modal.header>
  <div class="space-y-4">
    <c-input label="Email address" type="email" placeholder="name@company.com" />
    <c-select label="Role">
      <option value="viewer">Viewer</option>
      <option value="editor">Editor</option>
    </c-select>
  </div>
  <c-modal.action>
    <form method="dialog"><c-button variant="outline">Cancel</c-button></form>
    <c-button color="secondary">Send Invitation</c-button>
  </c-modal.action>
</c-modal>

Retrieval — View Details

<c-modal id="vessel_detail_modal" dismissible size="sm">
  <c-modal.header description="Read-only vessel record from the fleet registry.">
    MV Atlantic Star
  </c-modal.header>
  <dl class="space-y-3 text-sm">
    <div class="flex justify-between gap-4">
      <dt class="text-base-content/60 shrink-0">IMO Number</dt>
      <dd class="font-mono font-medium">9 123 456</dd>
    </div>
    <!-- more rows -->
  </dl>
  <c-modal.action>
    <form method="dialog"><c-button variant="outline">Close</c-button></form>
    <c-button color="primary">Edit Record</c-button>
  </c-modal.action>
</c-modal>

Sizes

<c-modal id="my_modal" size="xs">...</c-modal>  
<c-modal id="my_modal" size="sm">...</c-modal>  
<c-modal id="my_modal" size="md">...</c-modal>  
<c-modal id="my_modal" size="lg">...</c-modal>  
<c-modal id="my_modal" size="xl">...</c-modal>

Positioning

<!-- Center (default) -->
<c-modal id="my_modal" position="center">...</c-modal>

<!-- Top — for search dialogs and command palettes -->
<c-modal id="my_modal" position="top">...</c-modal>