SheetWithForm() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SheetWithForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/sheet-example.tsx lines 29–62

function SheetWithForm() {
  return (
    <Example title="With Form">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>Open</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 render={<Button variant="outline" />}>Close</SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </Example>
  )
}