Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add tags

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Need autocomplete suggestions? The Pro Tags Input adds a suggestions dropdown and max-count UI.

Overview

The <x-aura::tags> component renders a chip-style input where users type a value and press Enter to add it as a tag. Tags are displayed as removable chips inside the input area. Backspace on an empty field removes the last tag. The bound value is an array of strings via wire:model.

Basic Usage

<x-aura::tags label="Keywords" placeholder="Add a keyword..." />
<x-aura::tags
    label="Keywords"
    placeholder="Add a keyword..."
    wire:model="keywords"
/>

Props

Prop Type Default Description
label string|null null Label text displayed above the tag input.
placeholder string 'Add tag...' Placeholder shown when no tags are present.
max int|null null Maximum number of tags allowed. null for unlimited. Shows a count indicator when set.
disabled bool false Disable the entire control.
error string|null null Error message displayed below the control, applying error styling.
hint string|null null Help text displayed below the control. Hidden when an error is present.
size string 'md' Size variant. Options: sm, md, lg.

Variants / Examples

With Maximum Tags

When max is set, a count/max indicator appears below the input once at least one tag exists.

/3

<x-aura::tags label="Interests (max 3)" :max="3" placeholder="Add an interest..." />
<x-aura::tags
    label="Interests (max 3)"
    :max="3"
    placeholder="Add an interest..."
    wire:model="interests"
/>

With Error State

Please add at least one tag.

<x-aura::tags
    label="Required Tags"
    error="Please add at least one tag."
/>
<x-aura::tags
    label="Required Tags"
    error="Please add at least one tag."
    wire:model="tags"
/>

With Hint Text

Press Enter to add each tag.

<x-aura::tags
    label="Article Tags"
    hint="Press Enter to add each tag."
/>
<x-aura::tags
    label="Article Tags"
    hint="Press Enter to add each tag."
    wire:model="tags"
/>

Disabled State

<x-aura::tags
    label="Read-only Tags"
    disabled
/>
<x-aura::tags
    label="Read-only Tags"
    :disabled="true"
    wire:model="tags"
/>

Livewire Integration

<x-aura::tags
    label="Post Tags"
    :max="8"
    placeholder="Add tags..."
    hint="Up to 8 tags."
    wire:model.live="tags"
/>

@error('tags')
    <p class="text-sm text-red-600">{{ $message }}</p>
@enderror

class PostEditor extends Component
{
    public array $tags = [];

    protected function rules(): array
    {
        return [
            'tags' => 'array|max:8',
            'tags.*' => 'string|max:50',
        ];
    }
}

Keyboard Interaction

Key Action
Enter Add the current input value as a tag
Backspace (empty field) Remove the last tag

Accessibility

  • When a label prop is provided, a <label> element is rendered above the control.
  • Each tag chip's remove button has aria-label="Remove".
  • The disabled state is applied via opacity-50 pointer-events-none and the text input receives the HTML disabled attribute.
  • Error messages are rendered in a <p> tag styled with the aura-input-error-text class.
  • All additional HTML attributes (including aria-*, id) are forwarded to the outer wrapper via Blade's attribute bag.