Input Hint with Link and Filament Component

2024-08-16

Sometimes, just a text is not enough for a hint. That's where Filament allows you to render any Blade component or link inside of them.

Adding a hint to a form field is as simple as:

Forms\Components\TextInput::make('password')
->password()
->required()
->hint('Password Requirements'),

But what if we need a link? We can use the same method but create a "virtual" view that can render any Blade content:

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;
 
// ...
 
Forms\Components\TextInput::make('password')
->password()
->required()
->hint(function () {
return new HtmlString(Blade::render('<x-filament::link href="https://www.un.org/zh/internaljustice/include/efiling/added/passinfo.shtml">Password Requirements</x-filament::link>'));
}),

This will render a link using the Filament link component using Blade renderer with HtmlString conversion.

A few of our Premium Examples: