Section / Grid / Fieldset chrome. See Modern form layouts in Flex Fields Playground.
1. Tabbed editor — SegmentTabs + CoverCard
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\CoverCard;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCardStack;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs\SegmentTab;
ItemCardStack::make()
->stackGap('lg')
->extraAttributes(['class' => 'fff-form-layout fff-form-layout--wide'])
->schema([
CoverCard::make()
->backgroundImage('https://cdn.example.com/hero.jpg')
->ratio('21:9')
->fullWidth()
->topTitle('New listing'),
SegmentTabs::make('Listing')
->variant('ghost')
->fullWidth()
->tabs([
SegmentTab::make('Details')->schema([
FlexTextInput::make('name')->label('Name'),
FlexTextareaField::make('description')->label('Description'),
]),
SegmentTab::make('Location')->schema([
CountryField::make('country'),
PhoneField::make('phone'),
]),
]),
]);
2. iOS settings — ItemCardGroup
ItemCardGroup::make('Publishing')
->headerStyle('outside')
->variant('secondary')
->separated()
->schema([
ItemCard::make('Public listing')
->icon(GravityIcon::Eye)
->schema([SwitchField::make('public')->inline()->size('sm')]),
ItemCard::make('Notifications')
->icon(GravityIcon::Bell)
->schema([
SelectField::make('channel')
->options(['email' => 'Email', 'push' => 'Push'])
->variant('item-card')
->hiddenLabel(),
]),
]);
3. Two-column profile cards — ItemCardStack grid
ItemCardStack::make()
->columns(['default' => 1, 'sm' => 2])
->extraAttributes(['class' => 'fff-form-layout fff-form-layout--grid'])
->schema([
ItemCard::make('Profile')
->extraAttributes(['class' => 'item-card--form-panel'])
->variant('outline')->standalone()
->columns(1)
->schema([/* fields */]),
ItemCard::make('Contact')
->extraAttributes(['class' => 'item-card--form-panel'])
->variant('outline')->standalone()
->columns(1)
->schema([/* fields */]),
ItemCard::make('Visibility')
->extraAttributes(['class' => 'item-card--form-panel'])
->columnSpanFull()
->schema([ChoiceCards::make('status')->gridColumns(3)->options([...])]),
]);
Layout CSS helpers
| Class | Purpose |
|---|---|
fff-form-layout | Constrains width (max-width: 42rem) for single-column forms |
fff-form-layout--wide | Removes width cap (banners, tabbed editors) |
fff-form-layout--grid | Enables two-column ItemCardStack grid from 640px |
item-card--form-panel | Vertical field layout inside ItemCard |