---
name: textarea-emoji
category: inputs
summary: "Textarea with character counter and emoji picker"
subpath: "@42/core/textarea-emoji"
---

Textarea with character counter and pluggable emoji picker.

```html
<div data-c42-textarea-emoji>
  <textarea data-c42-textarea-emoji-input rows="3" placeholder="Write..."></textarea>
  <div>
    <button data-c42-textarea-emoji-trigger>😀</button>
    <span data-c42-textarea-emoji-counter></span>
  </div>
  <div data-c42-textarea-emoji-picker></div>
</div>
```

```ts
import { TextareaEmoji } from '@42/core/textarea-emoji';
new TextareaEmoji(root, {
  maxLength: 200,
  emojis: true,
  renderPicker: (container, insert) => {
    // render your emoji grid, call insert(emoji) on selection
  },
});
```

Options: `maxLength`, `emojis`, `renderPicker`
Events: `textarea-emoji:input` → `{ value, length }`, `textarea-emoji:emoji` → `{ emoji, value }`