PHPackages                             tangodev-it/filament-emoji-picker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. tangodev-it/filament-emoji-picker

ActiveLibrary[Utility & Helpers](/categories/utility)

tangodev-it/filament-emoji-picker
=================================

Add an emoji picker to your Filament input fields

3.0.0(1mo ago)2653.0k—0.6%93MITPHPPHP ^8.2

Since May 6Pushed 1mo ago3 watchersCompare

[ Source](https://github.com/TangoDev-it/filament-emoji-picker)[ Packagist](https://packagist.org/packages/tangodev-it/filament-emoji-picker)[ Docs](https://github.com/tangodev-it/filament-emoji-picker)[ RSS](/packages/tangodev-it-filament-emoji-picker/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (14)Versions (7)Used By (3)

Filament Emoji Picker
=====================

[](#filament-emoji-picker)

[![Latest Version on Packagist](https://camo.githubusercontent.com/36c92da4a91646b860c9588b8f600c9c931851428c5fb6d65cafdc475bd98a2a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f74616e676f6465762d69742f66696c616d656e742d656d6f6a692d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tangodev-it/filament-emoji-picker)

Add an emoji picker to your Filament input fields.

Version Compatibility
---------------------

[](#version-compatibility)

FilamentFilament Emoji Picker3.x1.x4.x2.x5.x3.xUse `composer require tangodev-it/filament-emoji-picker:^3.0` on Filament 5, or `^2.0` if you are still on Filament 4.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require tangodev-it/filament-emoji-picker
```

You can publish the config file with:

```
php artisan vendor:publish --tag="filament-emoji-picker-config"
```

or

```
php artisan filament-emoji-picker:install
```

Publish the config file if you want to change the default language of the picker (English). See the "Internationalization" section below for further details.

Usage
-----

[](#usage)

Just add the `EmojiPickerAction` to your existing input fields and you're ready to go 🚀.

Never heard about forms? [Read more](https://filamentphp.com/docs/5.x/forms/overview).

```
use TangoDevIt\FilamentEmojiPicker\EmojiPickerAction;

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->suffixAction(EmojiPickerAction::make('emoji-title')),
```

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_suffix_action.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_suffix_action.png)

Click on the action to show the emoji picker:

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_suffix_action_open.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_suffix_action_open.png)

Pick an emoji and it will be automatically appended to the field content:

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_suffix_action_open_picked.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_suffix_action_open_picked.png)

You can add the `EmojiPickerAction` also as a hint action:

```
TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-title')),
```

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_hint_action.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_hint_action.png)

Or as a prefix action:

```
TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->prefixAction(EmojiPickerAction::make('emoji-title')),
```

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_prefix_action.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_prefix_action.png)

You can attach the `EmojiPickerAction` also to a `Textarea` field:

```
Textarea::make('message')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-message')),
```

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/textarea_hint_action.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/textarea_hint_action.png)

### Action customization

[](#action-customization)

Like any other action, you can set the icon and the label (visible only on hint actions).

```
TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-title')
        ->icon('paint-brush')
        ->label('Choose an emoji')
    ),
```

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_hint_action_custom.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_hint_action_custom.png)

By default the icon is `heroicon-o-face-smile` and the label is `Emoji`. The label is only visible in hint actions.

### Popup positioning

[](#popup-positioning)

You can change the position and the offset (in pixel) of the popup:

```
TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->prefixAction(EmojiPickerAction::make('emoji-titolo')
        ->popupPlacement('bottom-start')
        ->popupOffset([-7, 4])
    ),
```

[![](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_prefix_action_open.png)](https://github.com/TangoDev-it/filament-emoji-picker/raw/main/screenshots/text_input_prefix_action_open.png)

Possible placements:

- `auto`
- `auto-start`
- `auto-end`
- `top`
- `top-start`
- `top-end`
- `bottom`
- `bottom-start`
- `bottom-end`
- `right`
- `right-start`
- `right-end`
- `left`
- `left-start`
- `left-end`

The default placement is `bottom-end` and the default offset is `[7,4]`.

Internationalization
--------------------

[](#internationalization)

You can change the picker language by publishing the config file (see the "Installation" section) and editing it:

Here's an example for the italian translation:

```