For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/en/components/emoji-picker.md.
A3S UI
  • English
  • v0.4.1

      • Emoji Picker

      Selects one emoji from a searchable, keyboard-navigable finite set and returns it to the host as ordinary text.

      Reaction set

      No reaction selected yet.

      Empty and disabled

      No reactions match.

      Usage

      <section class="emoji-picker" aria-label="Choose a reaction">
  <input class="input" type="search" placeholder="Search reactions" aria-label="Search reactions" />
  <div data-emoji-grid role="listbox">
    <button type="button" data-emoji-value="👍" aria-label="Thumbs up">👍</button>
    <button type="button" data-emoji-value="🎉" aria-label="Celebrate">🎉</button>
    <button type="button" data-emoji-value="❤️" aria-label="Love">❤️</button>
    <p hidden data-emoji-empty>No reactions match.</p>
  </div>
</section>

      Standalone controller

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/emoji-picker";

const component = document.querySelector(".emoji-picker");
component.getState();

      The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

      Contract

      SurfaceValue
      Root selector.emoji-picker
      Native root<section>
      Statesready, empty, disabled
      Eventsa3s:emoji-before-select, a3s:emoji-query-change, a3s:emoji-select
      MethodsgetState, refresh, select, setQuery

      Product boundary

      It does not own recents, skin-tone preferences, remote packs, or message sending. Large catalogs need host-provided grouping, virtualization, and localized search data.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Provide an accessible name on the root, keep options as buttons with explicit labels, and preserve keyboard grid navigation. Empty results must remain announced through the empty message node.