Emoji Picker

Get Ritla UI

Search, a section label and a grid of emoji for reactions and messages.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add emoji-picker
Also works with shadcn: npx shadcn@latest add @ritla/emoji-picker
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

emoji-picker.tsx

import { EmojiPicker } from "@/components/ui/emoji-picker";<EmojiPicker  searchLabel="Search emoji"  emptyLabel="No emoji found"  sections={[{ label: "Frequently used", emojis: [{ emoji: "👍", name: "thumbs up" }] }]}  onSelect={(e) => react(e.emoji)}/>

API reference

EmojiPicker

Prop	Type	Default	Description
`sections`	`EmojiSection[]`	None	Sections: a `label` and emoji, each with `emoji`, `name` and `keywords`.
`onSelect`	`(emoji: EmojiOption) => void`	None	When an emoji is chosen.
`searchLabel`	`string`	None	The search field's name and placeholder.
`emptyLabel`	`string`	None	When nothing matches.
`columns`	`number`	`8`	Emoji per row.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowRightArrowLeft`	Moves to the next or previous emoji; flips in Arabic.
`ArrowDownArrowUp`	Moves a row.
`HomeEnd`	The row's first and last emoji.
`Enter`	Chooses the emoji.

ARIA

Each emoji is a button named for it (thumbs up), and the grid is one tab stop.
Put it in a Popover opened from the Emoji button.

Arabic and RTL notes

Mirrors

The grid starts on the right, and the arrow keys follow the reading direction.

Does not mirror

The emoji themselves don't mirror.

Numerals: It holds no numbers.
Arabic typography: The section label is label-12 Medium. Give emoji Arabic names so Arabic search works.