Introduction
Sections group components together with a heading and optional description:
use Filament\Schemas\Components\Section;
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->schema([
// ...
])
heading
string | Htmlable | Closure
The section heading.
description
string | Htmlable | Closure
The description text below the heading.
Section::make()
->schema([
// ...
])
Adding an icon
Add an icon to the section header:
use Filament\Support\Icons\Heroicon;
Section::make('Cart')
->description('The items you have selected for purchase')
->icon(Heroicon::ShoppingBag)
->schema([
// ...
])
icon
string | BackedEnum | Htmlable | Closure
The icon to display in the header.
Aside layout
Position the heading and description to the left with content on the right:
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->aside()
->schema([
// ...
])
condition
bool | Closure
default:"true"
Whether to use the aside layout.
Collapsible sections
Make sections collapsible to hide content:
Section::make('Cart')
->description('The items you have selected for purchase')
->schema([
// ...
])
->collapsible()
condition
bool | Closure
default:"true"
Whether the section is collapsible.
Collapsed by default
Start with the section collapsed:
Section::make('Cart')
->schema([
// ...
])
->collapsed()
condition
bool | Closure
default:"true"
Whether the section starts collapsed.
Persisting collapsed state
Save the collapsed state in local storage:
Section::make('Cart')
->schema([
// ...
])
->collapsible()
->persistCollapsed()
->id('order-cart')
condition
bool | Closure
default:"true"
Whether to persist the collapsed state.
A unique ID for the section (required for persistence).
Compact styling
Use compact styling for nested sections:
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->schema([
// ...
])
->compact()
condition
bool | Closure
default:"true"
Whether to use compact styling.
Secondary styling
Use a less contrasting background for nested sections:
Section::make('Notes')
->schema([
// ...
])
->secondary()
->compact()
condition
bool | Closure
default:"true"
Whether to use secondary styling.
use Filament\Actions\Action;
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->afterHeader([
Action::make('test'),
])
->schema([
// ...
])
components
array | Schema | Component | Action | Closure
Components to display after the header.
use Filament\Actions\Action;
Section::make('Rate limiting')
->schema([
// ...
])
->footer([
Action::make('test'),
])
components
array | Schema | Component | Action | Closure
Components to display in the footer.
Grid columns
Create a grid within the section:
Section::make('Heading')
->schema([
// ...
])
->columns(2)
The number of columns or responsive column configuration.