# Dialog: Form

> Keep the form in `<DialogBody />` and point the submit button in the footer at it with `form`. Enter submits, and the dialog closes through `onOpenChange` once the value is saved.

Example: https://hextaui.com/docs/dialog/examples/form
Component docs: https://hextaui.com/docs/dialog.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/dialog-form.json
```

This adds `components/examples/dialog/form.tsx` with the Dialog component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dialog/form.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function DialogForm() {
  const [open, setOpen] = React.useState(false)
  const [name, setName] = React.useState("Acme")
  const [draft, setDraft] = React.useState(name)
  const formId = React.useId()

  return (
    <div className="flex flex-col items-center gap-3">
      <Dialog
        open={open}
        onOpenChange={(nextOpen) => {
          if (nextOpen) {
            setDraft(name)
          }
          setOpen(nextOpen)
        }}
      >
        <DialogTrigger render={<Button variant="outline" />}>
          Rename workspace
        </DialogTrigger>
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>Rename workspace</DialogTitle>
            <DialogDescription>
              Everyone in the workspace will see the new name.
            </DialogDescription>
          </DialogHeader>
          <DialogBody>
            <form
              id={formId}
              onSubmit={(event) => {
                event.preventDefault()
                setName(draft.trim() || name)
                setOpen(false)
              }}
            >
              <FieldGroup>
                <Field>
                  <FieldLabel>Workspace name</FieldLabel>
                  <Input
                    name="name"
                    value={draft}
                    onChange={(event) => setDraft(event.target.value)}
                    required
                  />
                </Field>
              </FieldGroup>
            </form>
          </DialogBody>
          <DialogFooter>
            <DialogClose render={<Button variant="outline" />}>
              Cancel
            </DialogClose>
            <Button type="submit" form={formId}>
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <p className="text-sm text-muted-foreground">Workspace: {name}</p>
    </div>
  )
}
```

## Props in this example

### Dialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – |  |
| `onOpenChange` | `(open: boolean, details) => void` | – |  |

### DialogTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DialogContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |  |

### DialogClose

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Dialog examples

- [Custom close button](https://hextaui.com/docs/dialog/examples/custom-close-button.md)
- [No close button](https://hextaui.com/docs/dialog/examples/no-close-button.md)
- [Sizes](https://hextaui.com/docs/dialog/examples/sizes.md)
- [Sticky footer](https://hextaui.com/docs/dialog/examples/sticky-footer.md)
- [Scrollable content](https://hextaui.com/docs/dialog/examples/scrollable-content.md)
- [Controlled](https://hextaui.com/docs/dialog/examples/controlled.md)
- [Nested](https://hextaui.com/docs/dialog/examples/nested.md)
- [Detached triggers](https://hextaui.com/docs/dialog/examples/detached-triggers.md)
- [Right to left](https://hextaui.com/docs/dialog/examples/rtl.md)