Logo of UI Challenges
Sign in

Gallery

See what others have created

In-App Emoji Picker
CS

cooling_shopkeeper

@cooling_shopkeeper

MediumInput

In-App Emoji Picker

Design a mobile text input with an emoji picker that slides up above the keyboard. The picker opens from the composer, stays anchored to the message field, and feels like part of the typing flow rather than a separate screen.

The panel should include categorized tabs for browsing emoji, with the active category always obvious. Keep the layout compact enough to live above the keyboard without hiding the input context.

This is about fast expression while typing. Users should be able to switch between text and emoji without losing their place, and the UI should make that transition feel immediate.

Treat the picker as a dense mobile control surface: lots of small choices, limited height, and a need for clear scanning. The challenge is balancing discoverability, category navigation, and quick selection.

What to deliver

  • Design the text input with the emoji trigger in its idle typing state
  • Design the emoji picker panel with category tabs and emoji grid
  • Show the transition from keyboard-only typing to picker-open state
  • Include a selected emoji state and a recent/frequent category treatment
  • Define the close/dismiss behavior back to the text field

Make the selected tab and the currently focused input state visible at the same time; that connection is what makes the panel feel attached to the composer.