Dialog

Dialog overlay that requires user attention or interaction.

Source Tailwind CSS JavaScript

Default

Edit Profile

Make changes to your profile here. Click save when you're done.

Name

Username

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/dialog"
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/input"
)

templ DialogDefault() {
	@dialog.Dialog(dialog.Props{
		ID: "default-dialog",
	}) {
		@dialog.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Dialog
			}
		}
		@dialog.Content(dialog.ContentProps{
			Class: "max-w-md",
		}) {
			@dialog.Header() {
				@dialog.Title() {
					Edit Profile
				}
				@dialog.Description() {
					Make changes to your profile here. Click save when you're done.
				}
			}
			<div class="space-y-4">
				<div class="space-y-2">
					@form.Label(form.LabelProps{For: "name"}) {
						Name
					}
					@input.Input(input.Props{
						ID:          "name",
						Placeholder: "Enter your name",
						Value:       "John Doe",
					})
				</div>
				<div class="space-y-2">
					@form.Label(form.LabelProps{For: "username"}) {
						Username
					}
					@input.Input(input.Props{
						ID:          "username",
						Placeholder: "Enter your username",
						Value:       "@johndoe",
					})
				</div>
			</div>
			@dialog.Footer() {
				@dialog.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Cancel
					}
				}
				@button.Button() {
					Save changes
				}
			}
		}
	}
}

Installation

Install the component
```
templui add dialog
```
Add the JavaScript to your layout
```
@dialog.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

External Trigger

External Dialog

This dialog can be triggered from anywhere on the page.

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/dialog"
)

templ DialogExternalTrigger() {
	<div class="space-y-4">
		// External trigger button
		@dialog.Trigger(dialog.TriggerProps{
			For: "external-dialog",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open External Dialog
			}
		}
		// Dialog defined separately
		@dialog.Dialog(dialog.Props{
			ID: "external-dialog",
		}) {
			@dialog.Content(dialog.ContentProps{
				Class: "max-w-md",
			}) {
				@dialog.Header() {
					@dialog.Title() {
						External Dialog
					}
					@dialog.Description() {
						This dialog can be triggered from anywhere on the page.
					}
				}
				@dialog.Footer() {
					@dialog.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
	</div>
}

Standalone Content

Standalone Dialog

This dialog content works without a wrapper component.

Perfect for dynamic content loading with HTMX or similar frameworks.

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/dialog"
)

templ DialogStandalone() {
	<div class="space-y-4">
		// Trigger for standalone dialog
		@dialog.Trigger(dialog.TriggerProps{
			For: "standalone-dialog",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Standalone Dialog
			}
		}
		// Standalone dialog content without wrapper
		@dialog.Content(dialog.ContentProps{
			ID:    "standalone-dialog",
			Open:  false,
			Class: "max-w-md",
		}) {
			@dialog.Header() {
				@dialog.Title() {
					Standalone Dialog
				}
				@dialog.Description() {
					This dialog content works without a wrapper component.
				}
			}
			<p class="text-sm">
				Perfect for dynamic content loading with HTMX or similar frameworks.
			</p>
			@dialog.Footer() {
				@dialog.Close(dialog.CloseProps{
					For: "standalone-dialog",
				}) {
					@button.Button() {
						Close
					}
				}
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Dialog

Main dialog wrapper component. Provides context for child components.

Name	Type	Default
`ID` Unique identifier for the dialog	`string`	`randomID`
`Class` Additional CSS classes to apply to the dialog container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the dialog container	`templ.Attributes`	`nil`
`DisableClickAway` Whether to disable closing the dialog by clicking outside	`bool`	`false`
`DisableESC` Whether to disable closing the dialog with the ESC key	`bool`	`false`
`Open` Whether the dialog should be open initially	`bool`	`false`

Trigger

Element that triggers the dialog to open. Can be used inside Dialog wrapper or externally with For prop.

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`
`For` ID of a specific dialog to trigger (for external triggers)	`string`	`""`

Content

Dialog content container. Can be used standalone for HTMX or inside Dialog wrapper.

Name	Type	Default
`ID` Dialog ID for standalone usage (when no context)	`string`	`""`
`Class` Additional CSS classes to apply to the content	`string`	`""`
`Attributes` Additional HTML attributes to apply to the content	`templ.Attributes`	`nil`
`HideCloseButton` Whether to hide the default close button	`bool`	`false`
`Open` Initial open state for standalone usage	`bool`	`false`
`DisableAutoFocus` Whether to disable automatic focusing of the first focusable element	`bool`	`false`

Header

Header section of the dialog.

Name	Type	Default
`ID` Unique identifier for the header element	`string`	`""`
`Class` Additional CSS classes to apply to the header	`string`	`""`
`Attributes` Additional HTML attributes to apply to the header	`templ.Attributes`	`nil`

Title

Dialog title component. Should be used inside Header.

Name	Type	Default
`ID` Unique identifier for the title element	`string`	`""`
`Class` Additional CSS classes to apply to the title	`string`	`""`
`Attributes` Additional HTML attributes to apply to the title	`templ.Attributes`	`nil`

Description

Dialog description component. Should be used inside Header.

Name	Type	Default
`ID` Unique identifier for the description element	`string`	`""`
`Class` Additional CSS classes to apply to the description	`string`	`""`
`Attributes` Additional HTML attributes to apply to the description	`templ.Attributes`	`nil`

Body

Body/content section of the dialog.

Name	Type	Default
`ID` Unique identifier for the body element	`string`	`""`
`Class` Additional CSS classes to apply to the body	`string`	`""`
`Attributes` Additional HTML attributes to apply to the body	`templ.Attributes`	`nil`

Footer

Footer section of the dialog.

Name	Type	Default
`ID` Unique identifier for the footer element	`string`	`""`
`Class` Additional CSS classes to apply to the footer	`string`	`""`
`Attributes` Additional HTML attributes to apply to the footer	`templ.Attributes`	`nil`

Close

Element that closes the dialog.

Name	Type	Default
`ID` Unique identifier for the close element	`string`	`""`
`Class` Additional CSS classes to apply to the close element	`string`	`""`
`Attributes` Additional HTML attributes to apply to the close element	`templ.Attributes`	`nil`
`For` ID of the dialog to close (defaults to closest dialog if empty)	`string`	`""`

JavaScript API

// Open a dialog programmatically
window.tui.dialog.open("dialog-id");

// Close a dialog
window.tui.dialog.close("dialog-id");

// Toggle dialog state
window.tui.dialog.toggle("dialog-id");

// Check if dialog is open (returns true/false)
const isOpen = window.tui.dialog.isOpen("dialog-id");

Menu

Getting Started

Components

Dialog

Edit Profile

Installation

Examples

External Dialog

Standalone Dialog

API Reference

Dialog

Trigger

Content

Header

Title

Description

Body

Footer

Close

JavaScript API