> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting started
export const AutoScreenshot = ({name, alt, version}) => {
const [loaded, setLoaded] = useState(false);
return
setLoaded(true)} className={`rounded-2xl transition-opacity dark:hidden ${loaded ? 'opacity-100' : 'opacity-0'}`} />
setLoaded(true)} className={`hidden rounded-2xl transition-opacity dark:block ${loaded ? 'opacity-100' : 'opacity-0'}`} />
;
};
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/infolists).
## Overview
Entry classes can be found in the `Filament\Infolists\Components` namespace. You can put them inside the `$infolist->schema()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Infolist;
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// ...
]);
}
```
If you're inside a [panel builder resource](../../panels/resources), the `infolist()` method should be static:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Infolist;
public static function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// ...
]);
}
```
Entries may be created using the static `make()` method, passing its unique name. You may use "dot notation" to access entries within relationships.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
TextEntry::make('author.name')
```
## Available entries
* [Text entry](./text)
* [Icon entry](./icon)
* [Image entry](./image)
* [Color entry](./color)
* [Key-value entry](./key-value)
* [Repeatable entry](./repeatable)
You may also [create your own custom entries](./custom) to display data however you wish.
## Setting a label
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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->label('Post title')
```
Optionally, you can have the label automatically translated [using Laravel's localization features](https://laravel.com/docs/localization) with the `translateLabel()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->translateLabel() // Equivalent to `label(__('Title'))`
```
## Entry URLs
When an entry is clicked, you may open a URL.
### Opening URLs
To open a URL, you may use the `url()` method, passing a callback or static URL to open. Callbacks accept a `$record` parameter which you may use to customize the URL:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
```
You may also choose to open the URL in a new tab:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
->openUrlInNewTab()
```
## Setting a default value
To set a default value for entries with an empty state, you may use the `default()` method. This method will treat the default state as if it were real, so entries like [image](./image) or [color](./color) will display the default image or color.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->default('Untitled')
```
## Adding placeholder text if an entry is empty
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](#setting-a-default-value), as the placeholder is always text and not treated as if it were real state.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->placeholder('Untitled')
```
## Adding helper text below the entry
Sometimes, you may wish to provide extra information for the user of the infolist. For this purpose, you may add helper text below the entry.
The `helperText()` method is used to add helper text:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->helperText('Your full name here, including any middle names.')
```
This method accepts a plain text string, or an instance of `Illuminate\Support\HtmlString` or `Illuminate\Contracts\Support\Htmlable`. This allows you to render HTML, or even markdown, in the helper text:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
use Illuminate\Support\HtmlString;
TextEntry::make('name')
->helperText(new HtmlString('Your full name here, including any middle names.'))
TextEntry::make('name')
->helperText(str('Your **full name** here, including any middle names.')->inlineMarkdown()->toHtmlString())
TextEntry::make('name')
->helperText(view('name-helper-text'))
```
## Adding a hint next to the label
As well as [helper text](#adding-helper-text-below-the-entry) below the entry, you may also add a "hint" next to the label of the entry. This is useful for displaying additional information about the entry, such as a link to a help page.
The `hint()` method is used to add a hint:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint('Documentation? What documentation?!')
```
This method accepts a plain text string, or an instance of `Illuminate\Support\HtmlString` or `Illuminate\Contracts\Support\Htmlable`. This allows you to render HTML, or even markdown, in the helper text:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(new HtmlString('Documentation'))
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
TextEntry::make('apiKey')
->label('API key')
->hint(view('api-key-hint'))
```
### Changing the text color of the hint
You can change the text color of the hint. By default, it's gray, but you may use `danger`, `info`, `primary`, `success` and `warning`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintColor('primary')
```
### Adding an icon aside the hint
Hints may also have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) rendered next to them:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintIcon('heroicon-m-question-mark-circle')
```
#### Adding a tooltip to a hint icon
Additionally, you can add a tooltip to display when you hover over the hint icon, using the `tooltip` parameter of `hintIcon()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintIcon('heroicon-m-question-mark-circle', tooltip: 'Read it!')
```
## Hiding entries
To hide an entry conditionally, you may use the `hidden()` and `visible()` methods, whichever you prefer:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('role')
->hidden(! auth()->user()->isAdmin())
// or
TextEntry::make('role')
->visible(auth()->user()->isAdmin())
```
## Calculated state
Sometimes you need to calculate the state of an entry, instead of directly reading it from a database entry.
By passing a callback function to the `state()` method, you can customize the returned state for that entry:
```php theme={"theme":"gruvbox-dark-hard"}
Infolists\Components\TextEntry::make('amount_including_vat')
->state(function (Model $record): float {
return $record->amount * (1 + $record->vat_rate);
})
```
## Tooltips
You may specify a tooltip to display when you hover over an entry:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->tooltip('Shown at the top of the page')
```
This method also accepts a closure that can access the current infolist record:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
use Illuminate\Database\Eloquent\Model;
TextEntry::make('title')
->tooltip(fn (Model $record): string => "By {$record->author->name}")
```
## Custom attributes
The HTML of entries can be customized, by passing an array of `extraAttributes()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('slug')
->extraAttributes(['class' => 'bg-gray-200'])
```
These get merged onto the outer `` element of each entry in that entry.
You can also pass extra HTML attributes to the entry wrapper which surrounds the label, entry, and any other text:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('slug')
->extraEntryWrapperAttributes(['class' => 'entry-locked'])
```
## Global settings
If you wish to change the default behavior of all entries globally, then you can call the static `configureUsing()` method inside a service provider's `boot()` method, to which you pass a Closure to modify the entries using. For example, if you wish to make all `TextEntry` components [`words(10)`](./text#limiting-word-count), you can do it like so:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::configureUsing(function (TextEntry $entry): void {
$entry
->words(10);
});
```
Of course, you are still able to overwrite this on each entry individually:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->words(null)
```
