Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Popover with Form for Solid

A Settings button that opens a title, one text field with the placeholder Enter value, and a full-width Save button.

UI library: Ark UI

Settings opens a panel titled Settings. One text field shows the placeholder Enter value. Save spans the panel and closes it.

Use it for a single quick setting. Save does not store the value until you handle it. Anything longer belongs in a Dialog. In Solid, Ark UI does not save the setting.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
    <PopoverTrigger asChild={props => <Button {...props()} variant="outline">Settings</Button>} />
    <PopoverContent>
      <PopoverTitle>Settings</PopoverTitle>
      <Input aria-label="Value" placeholder="Enter value" type="text" />
      <PopoverClose asChild={props => <Button {...props({
      "class": "w-full"
    })}>Save</Button>} />
    </PopoverContent>
  </Popover>

FAQ

What is in the settings panel?

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.

How do I close this panel from code?

Save closes the panel and leaves the input's text unread. Here each button sits in PopoverClose, which closes the panel without any state. To close it from your own code, control the open state on Popover. Pass open and onOpenChange on Popover. The callback gets { open }.

How does the Settings button become the trigger?

The trigger is a Button with variant="outline" and the label Settings. Activating it opens the panel beside the button. asChild is a function on PopoverTrigger that returns the button, and PopoverContent is the panel.

When does this belong in a dialog?

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.

How is the input labeled?

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.

How does this panel dismiss?

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.

API Reference

Popover

Sets asChild and props. The rest is on the Popover page.

Button

Sets props, variant="outline" and w-full. The rest is on the Button page.

Input

Sets aria-label="Value", placeholder="Enter value" and type="text". The rest is on the Input page.

All 15 popover examples