DialogWithForm() — ui Function Reference

Architecture documentation for the DialogWithForm() function in dialog-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DialogWithForm() — ui Function Reference

Dependency Diagram

graph TD
  69794a1f_c15c_3411_5f03_825d8b4b3721["DialogWithForm()"]
  0ab66e57_06e5_5970_84cc_8802ab83e2ce["dialog-example.tsx"]
  69794a1f_c15c_3411_5f03_825d8b4b3721 -->|defined in| 0ab66e57_06e5_5970_84cc_8802ab83e2ce
  style 69794a1f_c15c_3411_5f03_825d8b4b3721 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/dialog-example.tsx lines 79–120

function DialogWithForm() {
  return (
    <Example title="With Form" className="items-center justify-center">
      <Dialog>
        <form>
          <DialogTrigger asChild>
            <Button variant="outline">Edit Profile</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Edit profile</DialogTitle>
              <DialogDescription>
                Make changes to your profile here. Click save when you&apos;re
                done. Your profile will be updated immediately.
              </DialogDescription>
            </DialogHeader>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="name-1">Name</FieldLabel>
                <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
              </Field>
              <Field>
                <FieldLabel htmlFor="username-1">Username</FieldLabel>
                <Input
                  id="username-1"
                  name="username"
                  defaultValue="@peduarte"
                />
              </Field>
            </FieldGroup>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline">Cancel</Button>
              </DialogClose>
              <Button type="submit">Save changes</Button>
            </DialogFooter>
          </DialogContent>
        </form>
      </Dialog>
    </Example>
  )
}