Popover with Form for React

PopoverTitle reads Settings. The field is an Input with type="text", aria-label="Value", and placeholder="Enter value". Save is a Button with className="w-full". The input leaves value and onChange unset, so it is uncontrolled.

Save closes the panel and leaves the input's text unread. Here the panel is controlled: open and onOpenChange on Popover, and the button's handler sets the state to false. The callback gets the next open state first.

The trigger is a Button with variant="outline" and the label Settings. Activating it opens the panel beside the button. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

This panel is one Input and a Save button, and focus moves into it when it opens. A task with more fields belongs in a Dialog. Escape or a click outside still closes this panel.

The Input has aria-label="Value" and placeholder="Enter value". PopoverTitle says Settings above it. This file uses that aria-label as the field name.

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.