Emoji Picker

Emoji picker: search, categories, skin tones, recents. Pro · Forms and input › Color, size and emoji

Emoji picker: search by name and keyword, category toolbar with sticky section headers over a virtualized grid, skin tones and recently used emoji. Arrow keys move through the grid.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add emoji-picker

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { EmojiPicker } from 'valyro-ui-pro';

Props

Prop	Type	Default
`onEmojiSelect`	`(selection: EmojiSelection) => void`		Called when an emoji is chosen: clicked, activated by keyboard, or the first result on Enter in search. Receives the emoji with the current skin tone applied and its name.
`skinTone`	`0 \| 1 \| 2 \| 3 \| 4 \| 5`		Controlled `skinTone`; use with `onSkinToneChange`.
`defaultSkinTone`	`0 \| 1 \| 2 \| 3 \| 4 \| 5`	`0`	Initial `skinTone` when uncontrolled.
`onSkinToneChange`	`(tone: SkinTone) => void`		Called with the new `skinTone` when it changes.
`recentsKey`	`string \| null`	`'ui-emoji-picker-recents'`	localStorage key for recently used emoji; `null` keeps them in memory only.
`maxRecents`	`number`	`16`	Recently used emoji to remember (default 16).
`columns`	`number`	`8`	Emoji per row (default 8).
`height`	`number`	`280`	Height of the scrolling grid in px (default 280).
`autoFocus`	`boolean`	`false`	Focus the search field on mount (for pickers opened from a button).
`preview`	`boolean`	`true`	Footer with the hovered (or keyboard-active) emoji and its name (default true). Turn it off when the names are not translated into the interface language (see `labels.emojiName`).
`labels`	`Partial<EmojiPickerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Color Picker — Color selection
Swatch Picker — Pick a color from swatches: product, theme, label
Size Picker — Size selection: tiles or a scrolling row, out-of-stock states
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges

Previous: Size Picker · Next: File Uploader · All Forms and input