Popover

With form

Compound PopoverRoot example with inputs and PopoverClose.

API

Prop	Type	Default	Description
content*	React.ReactNode	—	Popover body.
title	React.ReactNode	—	Optional heading shown above the body.
description	React.ReactNode	—	Optional muted subtext under the title.
children	React.ReactElement	—	Inline trigger element wrapped by the popover.
trigger	string	—	Matches `data-popup-id` on an external trigger element.
popupTrigger	string	—	Matches `data-popup` on an external trigger element.
manualTrigger	boolean	false	With `trigger`, skip auto click toggle and control open state manually.
open / onOpenChange	boolean / (open: boolean) => void	—	Controlled open state.
modal	boolean	false	When true, interaction outside is limited like a dialog.
placement	"top" \| "right" \| "bottom" \| "left"	bottom	Preferred placement; flips to stay in viewport.
align	"start" \| "center" \| "end"	center	Alignment relative to the trigger.
sideOffset	number	12	Gap in pixels between trigger and panel.
alignOffset	number	—	Offset along the alignment axis.
showClose	boolean	false	Show a close button in the panel header.
defaultOpen	boolean	—	Initial open state when uncontrolled.
contentClassName	string	—	Merged onto the floating panel.
className	string	—	Merged onto the floating panel (alias for content styling).
onOpenAutoFocus / onCloseAutoFocus	(event: Event) => void	—	Focus management callbacks forwarded to the content.