README

👁 Latest Version on Packagist

Add an emoji picker to your Filament input fields.

Version Compatibility

Filament	Filament Emoji Picker
3.x	1.x
4.x	2.x
5.x	3.x

Use composer require tangodev-it/filament-emoji-picker:^3.0 on Filament 5, or ^2.0 if you are still on Filament 4.

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

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

Never heard about forms? Read more.

use TangoDevIt\FilamentEmojiPicker\EmojiPickerAction;

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

👁 Image

Click on the action to show the emoji picker:

👁 Image

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

👁 Image

You can add the EmojiPickerAction also as a hint action:

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

👁 Image

Or as a prefix action:

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

👁 Image

You can attach the EmojiPickerAction also to a Textarea field:

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

👁 Image

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')
 ),

👁 Image

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

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])
 ),

👁 Image

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

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:

<?php
// config for TangoDevIt/FilamentEmojiPicker
return [
 'locale' => 'it',
 'i18n' => 'https://cdn.jsdelivr.net/npm/emoji-picker-element@1.21.3/i18n/it.js',
 'datasource' => 'https://cdn.jsdelivr.net/npm/emoji-picker-element-data@1.6.0/it/cldr-native/data.json'
];

For further information please refer to the underlying javascript library documentation.

Theming

Out of the box the picker supports light and dark mode:

👁 Image

👁 Image

To further customize the style of the picker please refer to the underlying javascript library documentation.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• emoji-picker-element
• TangoDev
• All Contributors

License

The MIT License (MIT). Please see License File for more information.