Ermine UI

Emoji picker

Emoji in groups with a search box, moved through with the arrow keys, each one named for screen readers.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add emoji-picker
pnpm dlx ermineui add emoji-picker
yarn dlx ermineui add emoji-picker
bunx ermineui add emoji-picker

That copies 3 files into src/components/ui/emoji-picker/. Files you already have are kept.

Use

import { EmojiPicker, emojiCategories, searchEmoji } from '@/components/ui/emoji-picker'
<EmojiPicker v-model:recent="recent" @select="(emoji) => (message += emoji)" />

<ImageCropper ref="cropper" v-model="crop" :src="pictureUrl" round />
<Button @click="async () => upload(await cropper.crop({ width: 512 }))">Save</Button>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
EmojiPicker.vuesrc/components/ui/emoji-picker/EmojiPicker.vue
emoji.tssrc/components/ui/emoji-picker/emoji.ts
index.tssrc/components/ui/emoji-picker/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

EmojiPicker.vue 265 lines
<script setup lang="ts">
import { computed, nextTick, ref, useId, watch } from 'vue'
import { emojiCategories, searchEmoji, type Emoji, type EmojiCategory } from './emoji'

const props = withDefaults(
  defineProps<{
    categories?: readonly EmojiCategory[]
    /** Accessible name of the whole picker. */
    label?: string
    searchLabel?: string
    /** What to say when the search finds nothing. */
    emptyLabel?: string
    /** How many of the emoji last chosen to keep at the top. 0 keeps none. */
    recentCount?: number
  }>(),
  { categories: () => emojiCategories, label: 'Emoji', searchLabel: 'Search emoji', emptyLabel: 'No emoji found.', recentCount: 16 },
)

const emit = defineEmits<{
  /** An emoji was chosen. */
  select: [emoji: string, name: string]
}>()

/** The emoji chosen lately, newest first. Bind it and keep it in storage to remember them between visits. */
const recent = defineModel<string[]>('recent', { default: () => [] })

const id = useId()
const query = ref('')
const grid = ref<HTMLElement | null>(null)
/** The one emoji that can be tabbed to; the arrow keys move it. */
const stop = ref<string>()

const byChar = computed(() => new Map(props.categories.flatMap((category) => category.emoji).map((emoji) => [emoji.char, emoji])))
const groups = computed<EmojiCategory[]>(() => {
  if (query.value.trim()) return [{ name: 'Results', emoji: searchEmoji(query.value, props.categories) }]
  const used = recent.value.map((char) => byChar.value.get(char)).filter((emoji): emoji is Emoji => Boolean(emoji))
  return [...(used.length ? [{ name: 'Recent', emoji: used }] : []), ...props.categories]
})
const found = computed(() => groups.value.reduce((sum, group) => sum + group.emoji.length, 0))
const key = (group: EmojiCategory, emoji: Emoji) => `${group.name}:${emoji.char}`
const firstKey = computed(() => (groups.value[0]?.emoji[0] ? key(groups.value[0], groups.value[0].emoji[0]) : undefined))

// A new search, or a new set of groups, puts the tab stop back on the first emoji.
watch(groups, () => {
  stop.value = undefined
})

function choose(emoji: Emoji) {
  if (props.recentCount > 0) recent.value = [emoji.char, ...recent.value.filter((char) => char !== emoji.char)].slice(0, props.recentCount)
  emit('select', emoji.char, emoji.name)
}

function onKeydown(event: KeyboardEvent) {
  const buttons = Array.from(grid.value?.querySelectorAll<HTMLElement>('.er-emoji-picker-emoji') ?? [])
  const index = buttons.indexOf(event.target as HTMLElement)
  if (index === -1) return
  let next = index
  if (event.key === 'ArrowRight') next = index + 1
  else if (event.key === 'ArrowLeft') next = index - 1
  else if (event.key === 'Home') next = 0
  else if (event.key === 'End') next = buttons.length - 1
  else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
    // Up and down go to whichever emoji in the next row sits closest to straight above or below, even across groups.
    const from = buttons[index]!.getBoundingClientRect()
    const direction = event.key === 'ArrowDown' ? 1 : -1
    let rowTop: number | undefined
    let best = index
    let bestGap = Infinity
    for (let other = index + direction; other >= 0 && other < buttons.length; other += direction) {
      const box = buttons[other]!.getBoundingClientRect()
      if (Math.abs(box.top - from.top) < 2) continue
      rowTop ??= box.top
      if (Math.abs(box.top - rowTop) > 2) break
      const gap = Math.abs(box.left - from.left)
      if (gap < bestGap) [best, bestGap] = [other, gap]
    }
    next = best
  } else return
  event.preventDefault()
  const target = buttons[Math.max(0, Math.min(next, buttons.length - 1))]!
  stop.value = target.dataset.key
  void nextTick(() => target.focus())
}

function jump(name: string) {
  query.value = ''
  void nextTick(() => {
    const heading = grid.value?.querySelector<HTMLElement>(`[data-group="${CSS.escape(name)}"]`)
    // Scrolled inside the picker only: scrollIntoView would also move the page.
    if (heading && grid.value) grid.value.scrollTop = heading.offsetTop - grid.value.offsetTop
    heading?.parentElement?.querySelector<HTMLElement>('.er-emoji-picker-emoji')?.focus({ preventScroll: true })
  })
}
</script>

<template>
  <div class="er-emoji-picker" role="group" :aria-label="label">
    <input v-model="query" class="er-emoji-picker-search" type="search" :placeholder="searchLabel" :aria-label="searchLabel" autocomplete="off" />
    <nav v-if="!query.trim()" class="er-emoji-picker-nav" aria-label="Emoji groups">
      <button v-for="category in categories" :key="category.name" type="button" :aria-label="category.name" :title="category.name" @click="jump(category.name)">
        <span aria-hidden="true">{{ category.emoji[0]?.char }}</span>
      </button>
    </nav>
    <p class="er-emoji-picker-status" role="status">{{ query.trim() ? (found ? `${found} found` : emptyLabel) : '' }}</p>
    <div ref="grid" class="er-emoji-picker-scroll" @keydown="onKeydown">
      <section v-for="group in groups" :key="group.name" :aria-labelledby="`${id}-${group.name}`">
        <h3 :id="`${id}-${group.name}`" class="er-emoji-picker-heading" :data-group="group.name">{{ group.name }}</h3>
        <p v-if="!group.emoji.length" class="er-emoji-picker-empty">{{ emptyLabel }}</p>
        <div class="er-emoji-picker-grid">
          <button
            v-for="emoji in group.emoji"
            :key="emoji.char"
            type="button"
            class="er-emoji-picker-emoji"
            :data-key="key(group, emoji)"
            :tabindex="(stop ?? firstKey) === key(group, emoji) ? 0 : -1"
            :aria-label="emoji.name"
            :title="emoji.name"
            @click="choose(emoji)"
            @focus="stop = key(group, emoji)"
          >
            <span aria-hidden="true">{{ emoji.char }}</span>
          </button>
        </div>
      </section>
    </div>
  </div>
</template>

<style>
@layer components {
  .er-emoji-picker {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    max-width: 20rem;
    padding: 0.625rem;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-lg);
    background: var(--er-popover);
    color: var(--er-popover-foreground);
  }

  .er-emoji-picker-search {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--er-input);
    border-radius: var(--er-radius-md);
    background: var(--er-input-background);
    color: var(--er-foreground);
    font: inherit;
    /* 16px stops iOS from zooming the page when the field is focused. */
    font-size: 1rem;
  }

  @media (min-width: 48rem) {
    .er-emoji-picker-search {
      font-size: 0.875rem;
    }
  }

  .er-emoji-picker-search::placeholder {
    color: var(--er-muted-foreground);
  }

  .er-emoji-picker-search:focus-visible {
    border-color: var(--er-ring);
    outline: 2px solid color-mix(in oklab, var(--er-ring) 45%, transparent);
  }

  .er-emoji-picker-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.125rem;
  }

  .er-emoji-picker-nav button,
  .er-emoji-picker-emoji {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--er-radius-sm);
    background: transparent;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--er-duration);
  }

  .er-emoji-picker-nav button {
    flex: 1;
    height: 1.75rem;
    font-size: 1rem;
    /* Greyed, so the row reads as a set of labels rather than a ninth group of emoji. */
    filter: grayscale(1);
    opacity: 0.7;
  }

  .er-emoji-picker-nav button:hover,
  .er-emoji-picker-emoji:hover {
    background: var(--er-accent);
  }

  .er-emoji-picker-nav button:hover {
    filter: none;
    opacity: 1;
  }

  .er-emoji-picker-nav button:focus-visible,
  .er-emoji-picker-emoji:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: -1px;
  }

  .er-emoji-picker-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .er-emoji-picker-scroll {
    position: relative;
    height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .er-emoji-picker-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 0.25rem 0.125rem;
    background: var(--er-popover);
    color: var(--er-muted-foreground);
    font-size: 0.75rem;
    font-weight: var(--er-weight-semibold);
    line-height: 1rem;
  }

  .er-emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.125rem, 1fr));
  }

  .er-emoji-picker-emoji {
    aspect-ratio: 1;
    font-size: 1.375rem;
  }

  .er-emoji-picker-empty {
    margin: 0;
    padding: 1rem 0.125rem;
    color: var(--er-muted-foreground);
    font-size: 0.875rem;
  }
}
</style>
emoji.ts 63 lines
export interface Emoji {
  char: string
  /** What it shows, in words: read out by screen readers and matched by the search box. */
  name: string
}

export interface EmojiCategory {
  name: string
  emoji: readonly Emoji[]
}

const list = (text: string): Emoji[] =>
  text.split('|').map((entry) => {
    const space = entry.indexOf(' ')
    return { char: entry.slice(0, space), name: entry.slice(space + 1) }
  })

/**
 * A few hundred of the most used emoji, in the usual groups. Each entry is the emoji, a space and its name.
 * Add to the lists, or pass your own categories to the picker.
 */
export const emojiCategories: readonly EmojiCategory[] = [
  {
    name: 'Smileys',
    emoji: list('😀 grinning face|😃 smiling face with big eyes|😄 smiling face with smiling eyes|😁 beaming face|😆 squinting face|😅 grinning face with sweat|🤣 rolling on the floor laughing|😂 face with tears of joy|🙂 slightly smiling face|🙃 upside-down face|😉 winking face|😊 smiling face with blush|😇 smiling face with halo|🥰 smiling face with hearts|😍 heart eyes|🤩 star-struck|😘 face blowing a kiss|😋 face savouring food|😛 face with tongue|😜 winking face with tongue|🤪 zany face|🤔 thinking face|🤨 face with raised eyebrow|😐 neutral face|😑 expressionless face|😶 face without mouth|😏 smirking face|😒 unamused face|🙄 face with rolling eyes|😬 grimacing face|😌 relieved face|😔 pensive face|😴 sleeping face|😷 face with medical mask|🤒 face with thermometer|🥵 hot face|🥶 cold face|😵 dizzy face|🤯 exploding head|🥳 partying face|😎 smiling face with sunglasses|🤓 nerd face|😕 confused face|😟 worried face|😮 face with open mouth|😳 flushed face|🥺 pleading face|😢 crying face|😭 loudly crying face|😱 face screaming in fear|😤 face with steam from nose|😡 pouting face|😠 angry face|🤬 face with symbols on mouth|💀 skull|👻 ghost|🤖 robot|💩 pile of poo'),
  },
  {
    name: 'People',
    emoji: list('👋 waving hand|✋ raised hand|👌 OK hand|✌️ victory hand|🤞 crossed fingers|🤟 love-you gesture|🤘 sign of the horns|👈 pointing left|👉 pointing right|👆 pointing up|👇 pointing down|👍 thumbs up|👎 thumbs down|✊ raised fist|👊 oncoming fist|👏 clapping hands|🙌 raising hands|🤝 handshake|🙏 folded hands|✍️ writing hand|💪 flexed biceps|👀 eyes|🧠 brain|👶 baby|🧑 person|👩 woman|👨 man|🧓 older person|🙋 person raising hand|🤷 person shrugging|🤦 person facepalming|🙅 person gesturing no|🙆 person gesturing OK|💃 woman dancing|🕺 man dancing|🏃 person running|🚶 person walking|👪 family'),
  },
  {
    name: 'Nature',
    emoji: list('🐶 dog|🐱 cat|🐭 mouse|🐹 hamster|🐰 rabbit|🦊 fox|🐻 bear|🐼 panda|🐨 koala|🐯 tiger|🦁 lion|🐮 cow|🐷 pig|🐸 frog|🐵 monkey|🐔 chicken|🐧 penguin|🐦 bird|🦆 duck|🦉 owl|🐴 horse|🦄 unicorn|🐝 honeybee|🦋 butterfly|🐢 turtle|🐍 snake|🐙 octopus|🐬 dolphin|🐳 whale|🐟 fish|🌵 cactus|🌲 evergreen tree|🌳 deciduous tree|🌴 palm tree|🌱 seedling|🍀 four leaf clover|🌷 tulip|🌹 rose|🌻 sunflower|🌸 cherry blossom|☀️ sun|🌙 crescent moon|⭐ star|🌈 rainbow|☁️ cloud|🌧️ cloud with rain|⚡ lightning|❄️ snowflake|🔥 fire|💧 droplet|🌊 water wave'),
  },
  {
    name: 'Food',
    emoji: list('🍎 red apple|🍊 tangerine|🍋 lemon|🍌 banana|🍉 watermelon|🍇 grapes|🍓 strawberry|🍒 cherries|🍑 peach|🍍 pineapple|🥑 avocado|🍅 tomato|🥕 carrot|🌽 corn|🥦 broccoli|🍞 bread|🥐 croissant|🧀 cheese|🥚 egg|🥓 bacon|🍔 hamburger|🍟 french fries|🍕 pizza|🌭 hot dog|🌮 taco|🌯 burrito|🍜 steaming bowl|🍝 spaghetti|🍣 sushi|🍚 cooked rice|🥗 green salad|🍿 popcorn|🍩 doughnut|🍪 cookie|🎂 birthday cake|🍰 shortcake|🍫 chocolate bar|🍦 ice cream|☕ hot beverage|🍵 tea|🥤 cup with straw|🍺 beer|🍷 wine glass|🥂 clinking glasses|🍸 cocktail'),
  },
  {
    name: 'Activities',
    emoji: list('⚽ football|🏀 basketball|🏈 american football|⚾ baseball|🎾 tennis|🏐 volleyball|🏓 table tennis|⛳ golf|🏊 person swimming|🚴 person cycling|🏋️ person lifting weights|🧘 person in lotus position|🎮 video game|🎲 game die|♟️ chess pawn|🎯 bullseye|🎳 bowling|🎨 artist palette|🎬 clapper board|🎤 microphone|🎧 headphone|🎸 guitar|🎹 piano|🥁 drum|🎻 violin|🎉 party popper|🎊 confetti ball|🎈 balloon|🎁 wrapped gift|🏆 trophy|🥇 gold medal|🎟️ admission tickets'),
  },
  {
    name: 'Travel',
    emoji: list('🚗 car|🚕 taxi|🚌 bus|🚎 trolleybus|🚓 police car|🚑 ambulance|🚒 fire engine|🚚 delivery truck|🚜 tractor|🚲 bicycle|🛵 motor scooter|🏍️ motorcycle|🚆 train|🚇 metro|✈️ aeroplane|🚀 rocket|🚁 helicopter|⛵ sailboat|🚢 ship|⚓ anchor|🗺️ world map|🧭 compass|🏠 house|🏢 office building|🏥 hospital|🏫 school|🏨 hotel|🏪 convenience store|🏰 castle|🗽 Statue of Liberty|🗼 Tokyo tower|⛰️ mountain|🏖️ beach with umbrella|🏕️ camping|🌋 volcano|🌍 globe showing Europe and Africa|🌎 globe showing Americas|🌏 globe showing Asia and Australia'),
  },
  {
    name: 'Objects',
    emoji: list('⌚ watch|📱 mobile phone|💻 laptop|⌨️ keyboard|🖥️ desktop computer|🖨️ printer|📷 camera|🎥 movie camera|📺 television|📻 radio|⏰ alarm clock|⏳ hourglass|💡 light bulb|🔦 flashlight|🔋 battery|🔌 electric plug|💰 money bag|💳 credit card|💎 gem stone|🔧 wrench|🔨 hammer|🧰 toolbox|🔑 key|🔒 locked|🔓 unlocked|📦 package|✉️ envelope|📧 e-mail|📝 memo|📅 calendar|📌 pushpin|📎 paperclip|✂️ scissors|📚 books|📖 open book|🔍 magnifying glass|🛒 shopping cart|🎒 backpack|👓 glasses|👕 t-shirt|👟 running shoe|☂️ umbrella|🧸 teddy bear|🛏️ bed|🚪 door'),
  },
  {
    name: 'Symbols',
    emoji: list('❤️ red heart|🧡 orange heart|💛 yellow heart|💚 green heart|💙 blue heart|💜 purple heart|🖤 black heart|🤍 white heart|💔 broken heart|💕 two hearts|💯 hundred points|✅ check mark button|❌ cross mark|❓ question mark|❗ exclamation mark|⚠️ warning|🚫 prohibited|⛔ no entry|♻️ recycling symbol|✨ sparkles|💤 zzz|💬 speech balloon|💭 thought balloon|🔔 bell|🔕 bell with slash|🎵 musical note|➕ plus|➖ minus|➗ divide|✖️ multiply|♾️ infinity|🔴 red circle|🟠 orange circle|🟡 yellow circle|🟢 green circle|🔵 blue circle|🟣 purple circle|⚫ black circle|⚪ white circle|🏁 chequered flag|🚩 triangular flag|🏳️ white flag'),
  },
]

/** The emoji whose names hold every word typed, in any order. */
export function searchEmoji(query: string, categories: readonly EmojiCategory[] = emojiCategories): Emoji[] {
  const words = query.toLowerCase().split(/\s+/).filter(Boolean)
  if (!words.length) return []
  return categories.flatMap((category) => category.emoji).filter((emoji) => words.every((word) => emoji.name.toLowerCase().includes(word)))
}
index.ts 4 lines
/** Emoji picker — emoji in groups with a search box, moved through with the arrow keys, each one named for screen readers. */
export { default as EmojiPicker } from './EmojiPicker.vue'
export { emojiCategories, searchEmoji, type Emoji, type EmojiCategory } from './emoji'