Skip to main content
Version: 3.x

Input affixes Blade component

Overview​

The input affixes component should be used as a wrapper around the input or select components. It provides a border and other elements such as a prefix or suffix.

<x-filament::input.affixes>
    <x-filament::input
        type="text"
        wire:model="name"
    />
</x-filament::input.affixes>

<x-filament::input.affixes>
    <x-filament::input.select wire:model="status">
        <option value="draft">Draft</option>
        <option value="reviewing">Reviewing</option>
        <option value="published">Published</option>
    </x-filament::input.select>
</x-filament::input.affixes>

Triggering the error state of the input​

The component has special styling that you can use if it is invalid. To trigger this styling, you can use either Blade or Alpine.js.

To trigger the error state using Blade, you can pass the valid attribute to the component, which contains either true or false based on if the input is valid or not:

<x-filament::input.affixes :valid="$errors->has('name')">
    <x-filament::input
        type="text"
        wire:model="name"
    />
</x-filament::input.affixes>

Alternatively, you can use an Alpine.js expression to trigger the error state, based on if it evaluates to true or false:

<div x-data="{ errors: ['name'] }">
    <x-filament::input.affixes alpine-valid="errors.includes('name')">
        <x-filament::input
        type="text"
        wire:model="name"
    />
    </x-filament::input.affixes>
</div>

Disabling the input​

To disable the input, you must also pass the disabled attribute to the affixes component:

<x-filament::input.affixes disabled>
    <x-filament::input
        type="text"
        wire:model="name"
        disabled
    />
</x-filament::input.affixes>

Adding affix text aside the input​

You may place text before and after the input using the prefix and suffix slots:

<x-filament::input.affixes>
    <x-slot name="prefix">
        https://
    </x-slot>

    <x-filament::input
        type="text"
        wire:model="domain"
    />
    
    <x-slot name="suffix">
        .com
    </x-slot>
</x-filament::input.affixes>

Using icons as affixes​

You may place an icon before and after the input using the prefix-icon and suffix-icon attributes:

<x-filament::input.affixes suffix-icon="heroicon-m-globe-alt">
    <x-filament::input
        type="url"
        wire:model="domain"
    />
</x-filament::input.affixes>