PopoverForm() — ui Function Reference

Architecture documentation for the PopoverForm() function in popover-form.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ PopoverForm() — ui Function Reference

Dependency Diagram

graph TD
  347cb2e8_7599_fdc7_f196_63b70f75776e["PopoverForm()"]
  7e72b482_9828_7e96_9703_b7027b88620a["popover-form.tsx"]
  347cb2e8_7599_fdc7_f196_63b70f75776e -->|defined in| 7e72b482_9828_7e96_9703_b7027b88620a
  style 347cb2e8_7599_fdc7_f196_63b70f75776e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/popover-form.tsx lines 13–43

export function PopoverForm() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-64" align="start">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>
            Set the dimensions for the layer.
          </PopoverDescription>
        </PopoverHeader>
        <FieldGroup className="gap-4">
          <Field orientation="horizontal">
            <FieldLabel htmlFor="width" className="w-1/2">
              Width
            </FieldLabel>
            <Input id="width" defaultValue="100%" />
          </Field>
          <Field orientation="horizontal">
            <FieldLabel htmlFor="height" className="w-1/2">
              Height
            </FieldLabel>
            <Input id="height" defaultValue="25px" />
          </Field>
        </FieldGroup>
      </PopoverContent>
    </Popover>
  )
}