Fields

Tags

Free-form tag input. The user types text and commits it as a chip by pressing Enter or comma. Supports predefined suggestions, limits, and relationship mode.

use NyonCode\WireForms\Components\Tags;
use NyonCode\WireForms\Components\Tags;

Basic Usage

Tags::make('labels')
Tags::make('labels')

State is an array of strings: ['php', 'laravel', 'vue'].

With Suggestions

Tags::make('skills')
    ->suggestions(['PHP', 'Laravel', 'Vue', 'React', 'TypeScript'])
Tags::make('skills')
    ->suggestions(['PHP', 'Laravel', 'Vue', 'React', 'TypeScript'])

When allowNew(false) only suggestions can be picked:

Tags::make('category')
    ->suggestions(fn () => Category::pluck('name')->toArray())
    ->allowNew(false)
Tags::make('category')
    ->suggestions(fn () => Category::pluck('name')->toArray())
    ->allowNew(false)

Limits

Tags::make('tags')
    ->minItems(1)
    ->maxItems(5)
Tags::make('tags')
    ->minItems(1)
    ->maxItems(5)

Split Keys

By default Enter and comma commit a tag. Override if needed:

Tags::make('tags')
    ->splitKeys(['Enter', ' '])   // space-separated tags
Tags::make('tags')
    ->splitKeys(['Enter', ' '])   // space-separated tags

Relationship

Tags::make('tags')
    ->relationship('tags', 'name')   // many-to-many
Tags::make('tags')
    ->relationship('tags', 'name')   // many-to-many

Methods

Method	Type	Description
`suggestions(array\|Closure)`	array	Predefined values shown as autocomplete
`splitKeys(array)`	array	Keys that commit the input (default `['Enter', ',']`)
`minItems(int\|null)`	int	Minimum tag count
`maxItems(int\|null)`	int	Maximum tag count
`allowNew(bool)`	bool	Allow tags not in suggestions (default `true`)
`allowDuplicates(bool)`	bool	Allow the same tag twice (default `false`)
`relationship(string, string)`	—	Many-to-many relationship name and title attribute
`placeholder(string\|Closure)`	string	Input placeholder
`disabled(bool\|Closure)`	bool	Disable the input
`readOnly(bool\|Closure)`	bool	Read-only mode
`live()`	—	Trigger Livewire update after each tag change

See Common Field API for label, hint, tooltip, and other shared methods.