Saltar al contenido principal

Tags input

Introducción​

El componente tags input te permite interactuar con una lista de etiquetas.

Por defecto, las etiquetas se almacenan en JSON:

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')

Si estás guardando las etiquetas JSON usando Eloquent, debes asegurarte de añadir un cast array a la propiedad del modelo:

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'tags' => 'array',
        ];
    }

    // ...
}
tip

Filament también soporta spatie/laravel-tags. Consulta nuestra documentación de plugin para más información.

Etiquetas separadas por comas​

Puedes permitir que las etiquetas se almacenen en un string separado, en lugar de JSON. Para configurar esto, pasa el carácter separador al método separator():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->separator(',')
Details

Inyección de utilidades Además de permitir un valor estático, el método separator() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Autocompletar sugerencias de etiquetas​

Los tags inputs pueden tener sugerencias de autocompletado. Para habilitar esto, pasa un array de sugerencias al método suggestions():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->suggestions([
        'tailwindcss',
        'alpinejs',
        'laravel',
        'livewire',
    ])
Details

Inyección de utilidades Además de permitir un array estático, el método suggestions() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Definir teclas de división​

Las teclas de división te permiten mapear botones específicos en el teclado de tu usuario para crear una nueva etiqueta. Por defecto, cuando el usuario presiona "Enter", se crea una nueva etiqueta en el input. También puedes definir otras teclas para crear nuevas etiquetas, como "Tab" o " ". Para hacer esto, pasa un array de teclas al método splitKeys():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->splitKeys(['Tab', ' '])

Puedes leer más sobre las opciones posibles para las teclas.

Details

Inyección de utilidades Además de permitir un array estático, el método splitKeys() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Añadir un prefijo y sufijo a etiquetas individuales​

Puedes añadir prefijo y sufijo a las etiquetas sin modificar el estado real del campo. Esto puede ser útil si necesitas mostrar formato de presentación a los usuarios sin guardarlo. Esto se hace con el método tagPrefix() o tagSuffix():

use Filament\Forms\Components\TagsInput;

TagsInput::make('percentages')
    ->tagSuffix('%')
Details

Inyección de utilidades Además de permitir valores estáticos, los métodos tagPrefix() y tagSuffix() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades en las funciones como parámetros.

Reordenar etiquetas​

Puedes permitir que el usuario reordene las etiquetas dentro del campo usando el método reorderable():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->reorderable()

Opcionalmente, puedes pasar un valor booleano para controlar si las etiquetas deben ser reordenables o no:

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->reorderable(FeatureFlag::active())
Details

Inyección de utilidades Además de permitir un valor estático, el método reorderable() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Cambiar el color de las etiquetas​

Puedes cambiar el color de las etiquetas pasando un color al método color():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->color('danger')
Details

Inyección de utilidades Además de permitir un valor estático, el método color() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Recortar espacios en blanco​

Puedes recortar automáticamente los espacios en blanco del principio y el final de cada etiqueta usando el método trim():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->trim()

Puede que desees habilitar el recorte globalmente para todos los tags inputs, similar al middleware TrimStrings de Laravel. Puedes hacer esto en un service provider usando el método configureUsing():

use Filament\Forms\Components\TagsInput;

TagsInput::configureUsing(function (TagsInput $component): void {
    $component->trim();
});

Validación de etiquetas​

Puedes añadir reglas de validación para cada etiqueta pasando un array de reglas al método nestedRecursiveRules():

use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->nestedRecursiveRules([
        'min:3',
        'max:255',
    ])