Source: https://app-studio-6167b.web.app/docs/EmojiPicker

@app-studio/components

# EmojiPicker

A user-friendly tool for selecting and inserting emojis into text inputs or forms.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker.tsx)

## Import

```ts
import { EmojiPicker } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Vertical, Horizontal } from 'app-studio';
import { EmojiPicker } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';

export const ControlledEmojiPicker = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedEmoji, setSelectedEmoji] = useState('🎉');

  return (
    <Vertical gap={16}>
      <Text fontWeight="bold">Controlled EmojiPicker</Text>

      <EmojiPicker
        label="Controlled Emoji Picker"
        value={selectedEmoji}
        isOpen={isOpen}
        onChange={setSelectedEmoji}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        closeOnSelect={false}
        placeholder="Controlled picker"
      />

      <Horizontal gap={8}>
        <Button variant="outline" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? 'Close' : 'Open'} Picker
        </Button>

        <Button variant="outline" onClick={() => setSelectedEmoji('😀')}>
          Set Happy
        </Button>

        <Button variant="outline" onClick={() => setSelectedEmoji('❤️')}>
          Set Heart
        </Button>

        <Button variant="outline" onClick={() => setSelectedEmoji('🚀')}>
          Set Rocket
        </Button>
      </Horizontal>

      <Text fontSize="14px" color="color-gray-600">
        Selected emoji: {selectedEmoji}
      </Text>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**EmojiPicker**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"picker" \| "reaction"` `"picker"``"reaction"` | `'picker'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L12) |
| `trigger` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L13) |
| `quickEmojis` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L14) |
| `selectedEmojis` | `string[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L15) |
| `labels` | View type `Partial<{ select: string; reaction: string; search: string; more: string; empty: string; categoryEmpty: string; recent: string; smileys: string; people: string; animals: string; food: string; activities: string; travel: string; objects: string; symbols: string; flags: string; }>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L16) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L18) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L20) |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L22) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L24) |
| `helperText` | `string` | `—` | Additional guidance displayed with the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L26) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L28) |
| `defaultValue` | `string` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L30) |
| `onChange` | `((emoji: string) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L32) |
| `onEmojiSelect` | `((emoji: Emoji) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L34) |
| `views` | `EmojiPickerStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L36) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L38) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L40) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L42) |
| `error` | `boolean` | `false` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L44) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L46) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L48) |
| `showSearch` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L50) |
| `showCategories` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L52) |
| `showRecentEmojis` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L54) |
| `maxRecentEmojis` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L56) |
| `enabledCategories` | `EmojiCategory[]` | `[ 'recent', 'smileys', 'people', 'animals', 'food', 'activities', 'travel', 'objects', 'symbols', 'flags', ]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L58) |
| `customEmojis` | `Emoji[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L60) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L62) |
| `onOpen` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L64) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L66) |
| `closeOnSelect` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L68) |
| `aria-label` | `string` | `—` | Defines a string value that labels the current element.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L70) |
| `aria-describedby` | `string` | `—` | Identifies the element (or elements) that describes the object.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L72) |

Common inherited styling props (7)

**EmojiPicker inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.