Popover Form
A quick-add form in a popover with focus trap, Enter to submit, inline validation, a submitting state and a success morph back on the trigger.
Preview
Reading list
- Notes on baseline gridsexample.com/gridsDesign
- A gentle intro to job queuesexample.com/queuesResearch
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Trigger text. Required. |
| icon | ReactNode | plus | Trigger icon. |
| successLabel | string | "Added" | The trigger morphs to this after a successful submit. |
| title / description | string | — | Form heading; names the popover. |
| submitLabel | string | "Add" | Submit button text. |
| onSubmit | (values) => void | string | Promise<void | string> | — | Runs once fields are valid. A promise shows “Saving…”; a string is shown as a form error. |
| side / align | Radix side / align | "bottom" / "start" | Placement around the trigger. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / false / — | Controlled or uncontrolled. |
| modal / autoFocus | boolean | true / true | Trap focus and focus the first field. Turn both off for static previews. |
| PopoverFormField | { name, label, hint?, errorMessage?, ...input } | — | A labelled input wired to validation; any other named input is also submitted. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.