Bộ chọn ký tự

What is a Character Picker?

A character picker is a UI widget or interface component — either in an operating system, application, or web page — that allows users to browse and select special characters for insertion into text. Character pickers are the graphical, interactive counterpart to keyboard shortcuts: where shortcuts reward memorization, pickers reward discoverability. They are particularly common for emoji selection, symbol insertion in document editors, and mathematical notation input.

Types of Character Pickers

OS-Level Pickers

Windows Emoji & Symbols (Win + . or Win + ;): A floating panel with tabs for emoji, GIF, kaomoji, and symbols. Searchable, with recently used characters. Available in any text field system-wide.

macOS Character Viewer (Ctrl + Cmd + Space): A richer panel with full Unicode category browsing, search, recent/favorites. Can be expanded to a full Character Viewer window.

iOS/Android keyboard: The globe/emoji key opens a full-screen picker with scrollable categories and search.

Application-Level Pickers

Word processors (Google Docs: Insert → Special characters; Microsoft Word: Insert → Symbol) include their own character pickers, often with better search and categorization than OS-level tools.

Code editors and IDEs: Some (like VS Code with extensions) include Unicode character pickers accessible by command.

Web-Based Pickers

Many web applications implement in-page character pickers as <input> overlays or modal dialogs, typically using JavaScript to insert the selected character at the cursor position:

// Insert character at cursor in a textarea
function insertAtCursor(textarea, char) {
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const value = textarea.value;
  textarea.value = value.slice(0, start) + char + value.slice(end);
  // Move cursor after inserted character
  textarea.selectionStart = textarea.selectionEnd = start + char.length;
  textarea.focus();
}

// Usage
document.querySelector('#insert-btn').addEventListener('click', () => {
  insertAtCursor(document.querySelector('textarea'), '→');
});

Emoji Picker as Special Case

The emoji keyboard/picker has become the most widely used character picker in consumer software. Its design patterns have influenced character picker UX broadly:

• Category tabs with icon navigation (smileys, animals, food, activities, etc.)
• Search by keyword ("heart," "star," "thumbs")
• Skin tone modifier selection (for applicable emoji)
• Recently used section for fast repeat access
• Grid layout with hover/tap preview

Design Considerations for Web Pickers

Building an accessible, performant character picker for a web app involves:

1. Virtualized grid: Rendering all 154,998 Unicode characters at once is impractical. Virtualize the list using intersection observer or a library like react-window.
2. Search indexing: Pre-build a search index of character names for fast lookup.
3. ARIA roles: Use role="grid" for the character grid, role="gridcell" for each character, and aria-label with the character name for screen readers.
4. Keyboard navigation: Arrow keys to move focus, Enter to select, Escape to dismiss.
5. Focus management: Return focus to the triggering element after selection.

<div role="grid" aria-label="Character picker">
  <div role="row">
    <button role="gridcell" aria-label="Em dash U+2014" data-char="—">—</button>
    <button role="gridcell" aria-label="En dash U+2013" data-char="–">–</button>
    <!-- ... -->
  </div>
</div>

Quick Facts