Mantine UIFAQColors generator

EmojiPickerInput

Input with emoji picker dropdown

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/emoji

License

MIT

Usage

EmojiPickerInput component supports Input and Input.Wrapper component features and all button element props. The EmojiPickerInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.

Input description

Variant
Size
Radius
import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return <EmojiPickerInput data={emojiData} label="Input label" description="Input description" placeholder="Select emoji" />;
}

Controlled

The value is an emoji ID (a key in data.emojis). Use value and onChange to control it. When the value is not selected in the picker, the input displays the emoji without skin tone:

import { useState } from 'react';
import { EmojiPickerInput } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <EmojiPickerInput
      data={emojiData}
      value={value}
      onChange={setValue}
      placeholder="Select emoji"
    />
  );
}

Clearable

Set clearable to display a clear button when an emoji is selected. The clear button has aria-label="Clear emoji" by default, use clearButtonProps to change it or pass other props to the button:

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      clearable
      defaultValue="grinning"
      label="Clearable"
      placeholder="Select emoji"
    />
  );
}

Close on select

By default, the dropdown closes when an emoji is selected. Set closeOnSelect={false} to keep it open:

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      placeholder="Select emoji"
      closeOnSelect={false}
    />
  );
}

Disabled

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      disabled
      defaultValue="grinning"
      label="Disabled"
      placeholder="Select emoji"
    />
  );
}

Read only

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      readOnly
      defaultValue="grinning"
      label="Read only"
      placeholder="Select emoji"
    />
  );
}

EmojiPicker props

Use the pickerProps prop to pass props to the underlying EmojiPicker, for example to change the number of columns or hide sections:

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPickerInput } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      label="Custom picker"
      placeholder="Select emoji"
      pickerProps={{
        columns: 6,
        withPreview: false,
        withCategoryNav: false,
      }}
    />
  );
}

Controlled dropdown

Use opened and onOpenedChange props to control the dropdown state:

import { useState } from 'react';
import { EmojiPickerInput } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  const [opened, setOpened] = useState(false);

  return (
    <EmojiPickerInput
      data={emojiData}
      opened={opened}
      onOpenedChange={setOpened}
      placeholder="Select emoji"
    />
  );
}

onEmojiSelect

onChange is called with the emoji ID. Use onEmojiSelect to get the full emoji object with name, keywords and skin variants:

import { EmojiPickerInput } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      placeholder="Select emoji"
      onEmojiSelect={(emoji) => console.log(emoji)}
    />
  );
}

Popover props

Use the popoverProps prop to pass props to the underlying Popover component:

import { EmojiPickerInput } from '@mantine/emoji';
import { emojiData } from './emoji-data';

function Demo() {
  return (
    <EmojiPickerInput
      data={emojiData}
      placeholder="Select emoji"
      popoverProps={{ position: 'bottom-end', shadow: 'md', offset: 8 }}
    />
  );
}

Styles API

EmojiPickerInput supports the Styles API; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.

Get element ref

import { useRef } from 'react';
import { EmojiPickerInput } from '@mantine/emoji';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <EmojiPickerInput ref={ref} />;
}

Accessibility

If EmojiPickerInput is used without the label prop, it will not be announced properly by screen readers:

import { EmojiPickerInput } from '@mantine/emoji';

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <EmojiPickerInput />;
}

Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:

import { EmojiPickerInput } from '@mantine/emoji';

// Accessible input – it has aria-label
function Demo() {
  return <EmojiPickerInput aria-label="My input" />;
}

If the label prop is set, the input will be accessible and it is not required to set aria-label:

import { EmojiPickerInput } from '@mantine/emoji';

// Accessible input – it has associated label element
function Demo() {
  return <EmojiPickerInput label="My input" />;
}

EmojiPickerPopover

Notifications system