# EmojiPickerInput
Package: @mantine/emoji
Import: import { EmojiPickerInput } from '@mantine/emoji';
Description: Input with emoji picker dropdown

## Usage

EmojiPickerInput component supports [Input](https://mantine.dev/core/input) and [Input.Wrapper](https://mantine.dev/core/input) components features and all button element props. EmojiPickerInput documentation does not include all features supported by the component – see [Input](https://mantine.dev/core/input) documentation to learn about all available features.

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

const emojiData = emojiMartAdapter(data);

function Demo() {
  return <EmojiPickerInput data={emojiData} variant="default" size="sm" radius="md" label="Input label" withAsterisk={false} description="Input description" error="" 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:

```tsx
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:

```tsx
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:

```tsx
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

```tsx
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

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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 component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**EmojiPickerInput selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| wrapper | .mantine-EmojiPickerInput-wrapper | Root element of the Input |
| input | .mantine-EmojiPickerInput-input | Input element |
| section | .mantine-EmojiPickerInput-section | Left and right sections |
| bottomSection | .mantine-EmojiPickerInput-bottomSection | Bottom section element, rendered inside the input border at the bottom |
| root | .mantine-EmojiPickerInput-root | Root element |
| label | .mantine-EmojiPickerInput-label | Label element |
| required | .mantine-EmojiPickerInput-required | Required asterisk element, rendered inside label |
| description | .mantine-EmojiPickerInput-description | Description element |
| error | .mantine-EmojiPickerInput-error | Error element |
| success | .mantine-EmojiPickerInput-success | Success element |
| dropdown | .mantine-EmojiPickerInput-dropdown | Popover dropdown |
| inputValue | .mantine-EmojiPickerInput-inputValue | Wrapper of the selected emoji and its name |
| inputEmoji | .mantine-EmojiPickerInput-inputEmoji | Selected emoji character displayed in the input |
| inputEmojiName | .mantine-EmojiPickerInput-inputEmojiName | Selected emoji name displayed next to the emoji |


## Accessibility

EmojiPickerInput provides better accessibility support when used in forms. Make sure to associate the input with a label for better screen reader support.


#### Props

**EmojiPickerInput props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| clearButtonProps | InputClearButtonProps | - | Props passed down to the clear button |
| clearable | boolean | - | Determines whether the clear button is displayed |
| closeOnSelect | boolean | - | Determines whether the popover closes after emoji is selected |
| data | EmojiPickerData | required | Emoji data object, use `emojiMartAdapter` or `emojibaseAdapter` to convert data |
| defaultOpened | boolean | - | Default popover opened state for uncontrolled mode |
| defaultValue | string \| null | - | Default emoji id value for uncontrolled state |
| description | React.ReactNode | - | Contents of `Input.Description` component. If not set, description is not displayed. |
| descriptionProps | InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Description` component |
| disabled | boolean | - | Determines whether the input is disabled |
| error | React.ReactNode | - | Contents of `Input.Error` component. If not set, error is not displayed. |
| errorProps | InputErrorProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Error` component |
| inputContainer | (children: ReactNode) => ReactNode | - | Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. |
| inputSize | string | - | HTML `size` attribute for the input element (number of visible characters) |
| inputWrapperOrder | ("input" \| "label" \| "description" \| "error")[] | - | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |
| label | React.ReactNode | - | Contents of `Input.Label` component. If not set, label is not displayed. |
| labelProps | InputLabelProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Label` component |
| leftSection | React.ReactNode | - | Content section displayed on the left side of the input |
| leftSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| leftSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `leftSection` element |
| leftSectionWidth | React.CSSProperties["width"] | - | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |
| loaderProps | LoaderProps | - | Props passed down to the `Loader` component displayed when `loading` prop is set |
| loading | boolean | - | Displays loading indicator in the left or right section |
| loadingPosition | "left" \| "right" | - | Position of the loading indicator |
| onChange | (value: string \| null) => void | - | Called when value changes |
| onEmojiSelect | (emoji: EmojiPickerEmoji) => void | - | Called when an emoji is selected |
| onOpenedChange | (opened: boolean) => void | - | Called when popover opened state changes |
| opened | boolean | - | Controlled popover opened state |
| pickerProps | Omit<EmojiPickerProps, "data" \| "onEmojiSelect"> | - | Props passed to the `EmojiPicker` component inside the dropdown |
| placeholder | string | - | Input placeholder displayed when no emoji is selected |
| pointer | boolean | - | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). |
| popoverProps | Omit<PopoverProps, "onChange" \| "children" \| "opened" \| "defaultOpened"> | - | Props passed to the `Popover` component, use `opened`, `defaultOpened` and `onOpenedChange` props to control opened state |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |
| readOnly | boolean | - | Determines whether the input is in read-only mode |
| required | boolean | - | Adds required attribute to the input and a red asterisk on the right side of label |
| rightSection | React.ReactNode | - | Content section displayed on the right side of the input |
| rightSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| rightSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `rightSection` element |
| rightSectionWidth | React.CSSProperties["width"] | - | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |
| size | MantineSize | - | Controls input `height`, horizontal `padding`, and `font-size` |
| success | React.ReactNode | - | Contents of `Input.Success` component. If not set, success is not displayed. |
| successProps | InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Success` component |
| value | string \| null | - | Controlled emoji id value |
| withAsterisk | boolean | - | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |
| withErrorStyles | boolean | - | Determines whether the input should have red border and red text color when the `error` prop is set |
| withSuccessStyles | boolean | - | Determines whether the input should have green border when the `success` prop is set |
| wrapperProps | WrapperProps | - | Props passed down to the root element |