> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tags input

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/forms/tags-input.md).

## Introduction

The tags input component allows you to interact with a list of tags.

By default, tags are stored in JSON:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

TagsInput::make('tags')
```

Loading preview

![Tags input](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/forms/fields/tags-input/simple.jpg)

If you're saving the JSON tags using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:

```php theme={"theme":"gruvbox-dark-hard"}
use Illuminate\Database\Eloquent\Model;

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

    // ...
}
```

> [!TIP]
>
> Filament also supports [`spatie/laravel-tags`](https://github.com/spatie/laravel-tags). See our [plugin documentation](https://filamentphp.com/plugins/filament-spatie-tags) for more information.

## Comma-separated tags

You may allow the tags to be stored in a separated string, instead of JSON. To set this up, pass the separating character to the `separator()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

## Autocompleting tag suggestions

Tags inputs may have autocomplete suggestions. To enable this, pass an array of suggestions to the `suggestions()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

## Defining split keys

Split keys allow you to map specific buttons on your user's keyboard to create a new tag. By default, when the user presses "Enter", a new tag is created in the input. You may also define other keys to create new tags, such as "Tab" or " ". To do this, pass an array of keys to the `splitKeys()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

You can [read more about possible options for keys](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key).

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

## Adding a prefix and suffix to individual tags

You can add prefix and suffix to tags without modifying the real state of the field. This can be useful if you need to show presentational formatting to users without saving it. This is done with the `tagPrefix()` or `tagSuffix()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

Loading preview

![Tags input with tag prefix](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/forms/fields/tags-input/tag-prefix.jpg)

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

## Reordering tags

You can allow the user to reorder tags within the field using the `reorderable()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

Optionally, you may pass a boolean value to control if the tags should be reorderable or not:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

## Changing the color of tags

You can change the color of the tags by passing a [color](https://filament-34a8cf01.mintlify.site/4.x/styling/colors.md) to the `color()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

Loading preview

![Tags input with colored tags](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/forms/fields/tags-input/color.jpg)

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
</details>

## Trimming whitespace

You can automatically trim whitespace from the beginning and end of each tag using the `trim()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

You may want to enable trimming globally for all tags inputs, similar to Laravel's `TrimStrings` middleware. You can do this in a service provider using the `configureUsing()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

## Tags validation

You may add validation rules for each tag by passing an array of rules to the `nestedRecursiveRules()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\TagsInput;

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

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/forms/docs/14-tags-input.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.