Emoji picker

A React component in Beamline's Form controls category.

An emoji chosen from a search and a grid. The trigger shows the chosen emoji and opens a search above the emoji by group, with the recently used first. Typing narrows by name and keywords and says how many match, or that none do; arrows move through the grid by row and column, Enter picks and closes, and the chosen emoji stays marked when it opens again. On a phone it opens as a sheet.

Use it for

Choosing an emoji for a status, a reaction, a label or a channel icon.
Any small picker over a large set of symbols where search beats scrolling.

Not for

The quick reaction row under a message (chat-thread's reactions).
Choosing an icon from an icon set (an icon picker).

Anatomy

trigger: the chosen emoji, named for its use
search: names and keywords
grid: recently used, then each group, sticky group names
nothing found: said, with what to try

States

nothing chosen (a plus)
chosen (marked when it opens again)
recently used first
searching: how many match
nothing found
phone: a sheet
right to left: arrows follow the reading direction
reduced motion: no hover lift

Keyboard

Enter or Space opens; type to search
Down from the search moves into the grid; arrows move by row and column; Home and End
Enter picks and closes; Escape closes and returns focus to the trigger

Motion

The hovered cell lifts slightly; the layer grows from the trigger.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	What the emoji is for ("Reaction", "Status"); the trigger's name.
`value`	`string`	—	Controlled selected value; omit to use defaultValue.
`defaultValue`	`string`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((emoji: string) => void)`	—	Reports the selected value after a change; no callback by default.
`emoji`	`EmojiEntry[]`	—	The set to offer; a curated English-named set by default.
`defaultRecent`	`string[]`	—	Recently used, newest first; picks are added in front.
`defaultOpen`	`boolean`	—	Initial open state when uncontrolled; defaults to false.
`disabled`	`boolean`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLButtonElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`EmojiPanel.chosen`	`string`	—	On EmojiPanel: The emoji marked as chosen, where Tab lands first.
`EmojiPanel.recent`	`string[]`	—	On EmojiPanel: Shown first, newest first.
`EmojiPanel.onPick` (required)	`(emoji: string) => void`	—

Built from

Used in

Import

import { EmojiPicker, EmojiPanel } from "@beamline/emoji-picker";

Get it

Emoji picker is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent