'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
EmojiPicker
Pick an emoji: search by name in English or Spanish, jump by category, recent picks first, and a grid you move through with the arrow keys.
import { EmojiPicker } from '@alea/ui';
Examples
EmojiPicker
Search in English or Spanish ("heart", "corazón"), jump with the category row, move with the arrows and pick with Enter. Your picks show first next time.
Nothing picked yet
In a popover
The usual place for it: a button that says what it does opens the picker next to it, and picking closes it.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-focus…--alea-surface…--alea-surface-hover…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-6…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…--alea-motion-ease-emphasized…
Component
--alea-emoji-cols…
Props
EmojiPicker props
Pick an emoji: search by name (English or Spanish), jump by category, recent picks first. The grid is a listbox in a grid layout: arrows move in two directions, Enter picks, and every emoji has a name for screen readers.
| Prop | Type | Default | Description |
|---|---|---|---|
onSelectrequired | (emoji: string, name: string) => void | - | Called with the picked emoji and its name. |
autoFocusSearch | boolean | true | Puts the cursor in the search field when it opens. Default true. |
className | string | - | Extra class names. |
columns | number | 8 | Columns in the grid. Default 8. |
height | number | 280 | Height of the scrolling grid in px. Default 280. |
showRecent | boolean | true | Remembers the last picks (in this browser) and shows them first. Default true. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- States
- Hover (CSS)HoverKeyboard focusPressed
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-emoji.alea-emoji-cats.alea-emoji-cat.alea-emoji-scroll.alea-emoji-empty.alea-emoji-grid.alea-emoji-section.alea-emoji-header.alea-emoji-item
Accessibility
- The grid is a listbox in a grid layout: arrows move in two directions, Enter picks.
- Every emoji has a name (in the language of the page), so screen readers say "thumbs up", not the character.
- The category buttons are named and move the grid to their section; search results replace the sections.
- When nothing matches, a status says so.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move through the grid |
| Enter | Picks the emoji |
| Tab | Moves between the search, the categories and the grid |
Do and don't
Do
- Open it in a Popover next to what it adds to (a reaction, a message, a page icon).
- Keep recent picks on: people reuse the same few emoji.
Don't
- Don't use emoji as the only way to say something important.
- Don't open it without a trigger that says what it does ("Add reaction").
In Figma
EmojiPicker with the search, the category row and a grid of emoji.