> ## 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 LaracastsBanner = ({title, description, url, series}) => {
const instructors = {
'building-advanced-components': {
name: 'Dan Harrin',
avatar: 'https://avatars.githubusercontent.com/u/41773797?v=4',
twitter: 'https://twitter.com/danjharrin',
website: 'https://danharrin.com',
github: 'https://github.com/danharrin'
},
'rapid-laravel-development': {
name: 'Kevin McKee',
avatar: 'https://avatars.githubusercontent.com/u/4503765?v=4',
twitter: 'https://twitter.com/iAmKevinMcKee',
website: 'https://kevinmckee.me',
github: 'https://github.com/iAmKevinMcKee'
}
};
const instructor = instructors[series] || instructors['building-advanced-components'];
return
{instructor.name}
Instructor
;
};
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/forms).
## Overview
Filament forms are not limited to just displaying fields. You can also use "layout components" to organize them into an infinitely nestable structure.
Layout component classes can be found in the `Filament\Forms\Components` namespace. They reside within the schema of your form, alongside any [fields](../fields/getting-started).
Components may be created using the static `make()` method. Usually, you will then define the child component `schema()` to display inside:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Grid;
Grid::make(2)
->schema([
// ...
])
```
## Available layout components
Filament ships with some layout components, suitable for arranging your form fields depending on your needs:
* [Grid](./grid)
* [Fieldset](./fieldset)
* [Tabs](./tabs)
* [Wizard](./wizard)
* [Section](./section)
* [Split](./split)
* [Placeholder](./placeholder)
You may also [create your own custom layout components](./custom) to organize fields however you wish.
## Setting an ID
You may define an ID for the component using the `id()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Section;
Section::make()
->id('main-section')
```
## Adding extra HTML attributes
You can pass extra HTML attributes to the component, which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Section;
Section::make()
->extraAttributes(['class' => 'custom-section-style'])
```
Classes will be merged with the default classes, and any other attributes will override the default attributes.
## Global settings
If you wish to change the default behavior of a component 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 component using. For example, if you wish to make all section components have [2 columns](./grid) by default, you can do it like so:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Section;
Section::configureUsing(function (Section $section): void {
$section
->columns(2);
});
```
Of course, you are still able to overwrite this on each field individually:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Section;
Section::make()
->columns(1)
```
)}
Your logo here