Selected: 😀
Waiting for action
Open a sub-component to view its docs and settings.
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Reusable categorized emoji picker with search, rendered as a popover from any custom trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | — | Button or control that opens the picker. |
onSelect | (emoji) => void | — | Called when an emoji is chosen. |
placement | "top" | "bottom" | "top" | Popover position relative to the trigger. |
searchPlaceholder | string | "Search emojis" | Search field placeholder. |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open) => void | — | Called when the popover opens or closes. |
closeOnOutside | boolean | true | Close when clicking outside. |
closeOnEscape | boolean | true | Close on Escape key. |
aria-expanded and aria-haspopup.role="dialog" with a search field and emoji listbox.role="tablist".