Popover

When To Use

When you need a temporary floating container to display additional context or interactive controls
For forms that don't require a full page or modal
To provide a lightweight interface for auxiliary information
When you want to display contextual information without disrupting the user's current context
As an alternative to tooltips when more interactive content is needed

A basic popover with a trigger button and content.

A popover containing a simple form.

A popover with a visual arrow pointing to the trigger.

A popover with custom positioning and alignment.

Position

Alignment

Prop	Type	Default
`asChild?`	`boolean`	-
`value?`	`string \| number \| readonly string[]`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`name?`	`string`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

Prop	Type	Default
`forceMount?`	`true`	-
`onCloseAutoFocus?`	`((event: Event) => void)`	-
`onOpenAutoFocus?`	`((event: Event) => void)`	-
`onInteractOutside?`	`((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void)`	-
`onFocusOutside?`	`((event: FocusOutsideEvent) => void)`	-
`onPointerDownOutside?`	`((event: PointerDownOutsideEvent) => void)`	-
`onEscapeKeyDown?`	`((event: KeyboardEvent) => void)`	-
`updatePositionStrategy?`	`"always" \| "optimized"`	-
`hideWhenDetached?`	`boolean`	-
`sticky?`	`"partial" \| "always"`	-
`collisionPadding?`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`	-
`collisionBoundary?`	`Boundary \| Boundary[]`	-
`avoidCollisions?`	`boolean`	-
`arrowPadding?`	`number`	-
`alignOffset?`	`number`	-
`align?`	`"center" \| "start" \| "end"`	-
`sideOffset?`	`number`	-
`side?`	`"top" \| "right" \| "bottom" \| "left"`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

The Popover component adheres to the WAI-ARIA Dialog Pattern.

The popover trigger has aria-expanded set to true or false depending on the popover state.
When open, the popover content has aria-modal set to true.
Focus is trapped within the popover when open for keyboard users.
Escape key dismisses the popover.
The popover has a close button for accessibility.
ARIA roles, states, and properties are appropriately applied to ensure screen reader compatibility.