filament/infolists
Build rich, read-only detail views in Filament with Infolists. Compose fields, sections, and layouts to display record data in panels, resources, and pages, with configurable formatting, visibility rules, and responsive components for admin UIs.
title: Overview
import Aside from "@components/Aside.astro" import AutoScreenshot from "@components/AutoScreenshot.astro" import UtilityInjection from "@components/UtilityInjection.astro"
Filament's infolists package lets you display a read-only list of data for a specific entity. It's integrated into other Filament packages, such as inside panel resources, relation managers, and action modals. Understanding how to use the infolist builder will save you time when building custom Livewire applications or working with other Filament features.
This guide covers the fundamentals of building infolists with Filament. If you want to add an infolist to your own Livewire component, start here before continuing. If you're adding an infolist to a panel resource, or using another Filament package, you're ready to begin!
Entry classes can be found in the Filament\Infolists\Components namespace. They reside within the schema array of components. Filament includes a number of entries built-in:
You may also create your own custom entries to display data however you wish.
Entries may be created using the static make() method, passing its unique name. Usually, the name of an entry corresponds to the name of an attribute on an Eloquent model. You may use "dot notation" to access attributes within relationships:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
TextEntry::make('author.name')
Entries may feel a bit magic at first, but they are designed to be simple to use and optimized to display data from an Eloquent record. Despite this, they are flexible and you can display data from any source, not just an Eloquent record attribute.
The data that an entry displays is called its "state". When using a panel resource, the infolist is aware of the record it is displaying. This means that the state of the entry is set based on the value of the attribute on the record. For example, if the entry is used in the infolist of a PostResource, then the title attribute value of the current post will be displayed.
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
If you want to access the value stored in a relationship, you can use "dot notation". The name of the relationship that you would like to access data from comes first, followed by a dot, and then the name of the attribute:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('author.name')
You can also use "dot notation" to access values within a JSON / array column on an Eloquent model. The name of the attribute comes first, followed by a dot, and then the key of the JSON object you want to read from:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('meta.title')
You can pass your own state to an entry by using the state() method:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->state('Hello, world!')
<UtilityInjection set="infolistEntries" except="$state" version="5.x">The state() method also accepts a function to dynamically calculate the state. You can inject various utilities into the function as parameters.</UtilityInjection>
When an entry is empty (its state is null), you can use the default() method to define alternative state to use instead. This method will treat the default state as if it were real, so entries like image or color will display the default image or color.
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->default('Untitled')
Sometimes you may want to display placeholder text for entries with an empty state, which is styled as a lighter gray text. This differs from the default value, as the placeholder is always text and not treated as if it were real state.
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->placeholder('Untitled')
By default, the label of the entry, which is displayed in the header of the infolist, is generated from the name of the entry. You may customize this using the label() method:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->label('Full name')
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the label() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
Customizing the label in this way is useful if you wish to use a translation string for localization:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->label(__('entries.name'))
It may be tempting to set the label to an empty string to hide it, but this is not recommended. Setting the label to an empty string will not communicate the purpose of the entry to screen readers, even if the purpose is clear visually. Instead, you should use the hiddenLabel() method, so it is hidden visually but still accessible to screen readers:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->hiddenLabel()
Optionally, you may pass a boolean value to control if the label should be hidden or not:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->hiddenLabel(FeatureFlag::active())
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the hiddenLabel() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
When an entry is clicked, you may open a URL. To do this, pass a URL to the url() method:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url('/about/titles')
You may pass a function to the url() method to dynamically calculate the URL. For example, you may want to access the current Eloquent record for the infolist by injecting $record as an argument:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
If you're using a panel resource, you can generate a link to a page for the record using the getUrl() method:
use App\Filament\Posts\PostResource;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => PostResource::getUrl('edit', ['record' => $record]))
<UtilityInjection set="infolistEntries" version="5.x">The function passed to url() can inject various utilities as parameters.</UtilityInjection>
You may also choose to open the URL in a new tab:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => PostResource::getUrl('edit', ['record' => $record]))
->openUrlInNewTab()
Optionally, you may pass a boolean value to control if the URL should open in a new tab or not:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => PostResource::getUrl('edit', ['record' => $record]))
->openUrlInNewTab(FeatureFlag::active())
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the openUrlInNewTab() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
You may hide an entry:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('role')
->hidden()
Optionally, you may pass a boolean value to control if the entry should be hidden or not:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('role')
->hidden(! FeatureFlag::active())
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the hidden() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
Alternatively, you may use the visible() method to control if the entry should be hidden or not. In some situations, this may help to make your code more readable:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('role')
->visible(FeatureFlag::active())
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the visible() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
If you need to hide an entry based on a user interaction, you can use the hidden() or visible() methods, passing a function that uses utilities injected to determine whether the entry should be hidden or not:
use Filament\Forms\Components\Select;
use Filament\Infolists\Components\IconEntry;
Select::make('role')
->options([
'user' => 'User',
'staff' => 'Staff',
])
->live()
IconEntry::make('is_admin')
->boolean()
->hidden(fn (Get $get): bool => $get('role') !== 'staff')
In this example, the role field is set to live(), which means that the schema will reload the schema each time the role field is changed. This will cause the function that is passed to the hidden() method to be re-evaluated, which will hide the is_admin entry if the role field is not set to staff.
However, reloading the schema each time an entry causes a network request to be made, since there is no way to re-run the PHP function from the client-side. This is not ideal for performance.
Alternatively, you can write JavaScript to hide the entry based on the value of a field. This is done by passing a JavaScript expression to the hiddenJs() method:
use Filament\Forms\Components\Select;
use Filament\Infolists\Components\IconEntry;
Select::make('role')
->options([
'user' => 'User',
'staff' => 'Staff',
])
IconEntry::make('is_admin')
->boolean()
->hiddenJs(<<<'JS'
$get('role') !== 'staff'
JS)
Although the code passed to hiddenJs() looks very similar to PHP, it is actually JavaScript. Filament provides the $get() utility function to JavaScript that behaves very similar to its PHP equivalent, but without requiring the depended-on entry to be live().
The visibleJs() method is also available, which works in the same way as hiddenJs(), but controls if the entry should be visible or not:
use Filament\Forms\Components\Select;
use Filament\Infolists\Components\IconEntry;
Select::make('role')
->options([
'user' => 'User',
'staff' => 'Staff',
])
IconEntry::make('is_admin')
->boolean()
->visibleJs(<<<'JS'
$get('role') === 'staff'
JS)
The "operation" of a schema is the current action being performed on it. Usually, this is either create, edit or view, if you are using the panel resource.
You can hide an entry based on the current operation by passing an operation to the hiddenOn() method:
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_admin')
->boolean()
->hiddenOn('edit')
// is the same as
IconEntry::make('is_admin')
->boolean()
->hidden(fn (string $operation): bool => $operation === 'edit')
You can also pass an array of operations to the hiddenOn() method, and the entry will be hidden if the current operation is any of the operations in the array:
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_admin')
->boolean()
->hiddenOn(['edit', 'view'])
// is the same as
IconEntry::make('is_admin')
->boolean()
->hidden(fn (string $operation): bool => in_array($operation, ['edit', 'view']))
Alternatively, you may use the visibleOn() method to control if the entry should be hidden or not. In some situations, this may help to make your code more readable:
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_admin')
->boolean()
->visibleOn('create')
IconEntry::make('is_admin')
->boolean()
->visibleOn(['create', 'edit'])
Entries may have their labels displayed inline with the entry, rather than above it. This is useful for infolists with many entries, where vertical space is at a premium. To display an entry's label inline, use the inlineLabel() method:
use Filament\Infolists\Components\TextEntry;
TextInput::make('name')
->inlineLabel()
Optionally, you may pass a boolean value to control if the label should be displayed inline or not:
use Filament\Infolists\Components\TextInput;
TextInput::make('name')
->inlineLabel(FeatureFlag::active())
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the inlineLabel() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
If you wish to display all labels inline in a layout component like a section or tab, you can use the inlineLabel() on the component itself, and all entries within it will have their labels displayed inline:
use Filament\Infolists\Components\TextInput;
use Filament\Schemas\Components\Section;
Section::make('Details')
->inlineLabel()
->schema([
TextInput::make('name'),
TextInput::make('email')
->label('Email address'),
TextInput::make('phone')
->label('Phone number'),
])
You can also use inlineLabel() on the entire schema to display all labels inline:
use Filament\Schemas\Schema;
public function infolist(Schema $schema): Schema
{
return $schema
->inlineLabel()
->components([
// ...
]);
}
When using inlineLabel() on a layout component or schema, you can still opt-out of inline labels for individual entries by using the inlineLabel(false) method on the entry:
use Filament\Infolists\Components\TextInput;
use Filament\Schemas\Components\Section;
Section::make('Details')
->inlineLabel()
->schema([
TextInput::make('name'),
TextInput::make('email')
->label('Email address'),
TextInput::make('phone')
->label('Phone number')
->inlineLabel(false),
])
You may specify a tooltip to display when you hover over an entry:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->tooltip('Shown at the top of the page')
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the tooltip() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
You may align the content of an entry to the start (left in left-to-right interfaces, right in right-to-left interfaces), center, or end (right in left-to-right interfaces, left in right-to-left interfaces) using the alignStart(), alignCenter() or alignEnd() methods:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->alignStart() // This is the default alignment.
TextEntry::make('title')
->alignCenter()
TextEntry::make('title')
->alignEnd()
Alternatively, you may pass an Alignment enum to the alignment() method:
use Filament\Infolists\Components\TextEntry;
use Filament\Support\Enums\Alignment;
TextEntry::make('title')
->alignment(Alignment::Center)
<UtilityInjection set="infolistEntries" version="5.x">As well as allowing a static value, the alignment() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
Entries contain many "slots" where content can be inserted in a child schema. Slots can accept text, any schema component, actions and action groups. Usually, prime components are used for content.
The following slots are available for all entries:
aboveLabel()beforeLabel()afterLabel()belowLabel()aboveContent()beforeContent()afterContent()belowContent()<UtilityInjection set="infolistEntries" version="5.x">As well as allowing static values, the slot methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.</UtilityInjection>
To insert plain text, you can pass a string to these methods:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->belowContent('This is the user\'s full name.')
To insert a schema component, often a prime component, you can pass the component to the method:
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Components\Text;
use Filament\Support\Enums\FontWeight;
TextEntry::make('name')
->belowContent(Text::make('This is the user\'s full name.')->weight(FontWeight::Bold))
To insert an action or action group, you can pass the action or action group to the method:
use Filament\Actions\Action;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->belowContent(Action::make('generate'))
You can insert any combination of content into the slots by passing an array of content to the method:
use Filament\Actions\Action;
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Components\Icon;
use Filament\Support\Icons\Heroicon;
TextEntry::make('name')
->belowContent([
Icon::make(Heroicon::InformationCircle),
'This is the user\'s full name.',
Action::make('generate'),
])
You can also align the content in the slots by passing the array of content to either Schema::start() (default), Schema::end() or Schema::between():
use Filament\Actions\Action;
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Compone.....
How can I help you explore Laravel packages today?