SheetWithForm() — ui Function Reference

Architecture documentation for the SheetWithForm() function in sheet-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SheetWithForm() — ui Function Reference

Dependency Diagram

graph TD
  e17db5f0_2014_d1f8_a95d_cc6bf0030375["SheetWithForm()"]
  288ac524_a063_cb90_3755_edf03422f04d["sheet-example.tsx"]
  e17db5f0_2014_d1f8_a95d_cc6bf0030375 -->|defined in| 288ac524_a063_cb90_3755_edf03422f04d
  style e17db5f0_2014_d1f8_a95d_cc6bf0030375 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/sheet-example.tsx lines 29–66

function SheetWithForm() {
  return (
    <Example title="With Form">
      <Sheet>
        <SheetTrigger asChild>
          <Button variant="outline">Open</Button>
        </SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </SheetDescription>
          </SheetHeader>
          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
                <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
              </Field>
              <Field>
                <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
                <Input id="sheet-demo-username" defaultValue="@peduarte" />
              </Field>
            </FieldGroup>
          </div>
          <SheetFooter>
            <Button type="submit">Save changes</Button>
            <SheetClose asChild>
              <Button variant="outline">Close</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </Example>
  )
}