Section

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([
        // ...
    ])

string | Htmlable | Closure

The section heading.

string | Htmlable | Closure

The description text below the heading.

Sections without headers

Create a simple card wrapper without a 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([
        // ...
    ])

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([
        // ...
    ])

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()

bool | Closure

default:"true"

Whether the section is collapsible.

Collapsed by default

Start with the section collapsed:

Section::make('Cart')
    ->schema([
        // ...
    ])
    ->collapsed()

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')

bool | Closure

default:"true"

Whether to persist the collapsed state.

string | Closure

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()

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()

bool | Closure

default:"true"

Whether to use secondary styling.

Header actions

Add actions to the section header:

use Filament\Actions\Action;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->afterHeader([
        Action::make('test'),
    ])
    ->schema([
        // ...
    ])

array | Schema | Component | Action | Closure

Components to display after the header.

Add actions to the section footer:

use Filament\Actions\Action;

Section::make('Rate limiting')
    ->schema([
        // ...
    ])
    ->footer([
        Action::make('test'),
    ])

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)

int | array | Closure

The number of columns or responsive column configuration.

Form Components

Table Components

Layout Components

Infolist Components

Introduction

Sections without headers

Adding an icon

Aside layout

Collapsible sections

Collapsed by default

Persisting collapsed state

Compact styling

Secondary styling

Header actions

Footer actions

Grid columns

​Introduction

​Sections without headers

​Adding an icon

​Aside layout

​Collapsible sections

​Collapsed by default

​Persisting collapsed state

​Compact styling

​Secondary styling

​Header actions

​Footer actions

​Grid columns

Introduction

Sections without headers

Adding an icon

Aside layout

Collapsible sections

Collapsed by default

Persisting collapsed state

Compact styling

Secondary styling

Header actions

Footer actions

Grid columns