Skip to main content
← Back to Table of Contents

​
Summary

Schema layout component providing iOS-style segmented tabs. Each tab wraps a nested form schema, allowing for clean organization of complex forms. Shares the same visual language as SegmentControl.
ClassBjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs
Tab classBjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs\SegmentTab
StateLocal UI state (optional query-string persistence)
Playgroundsegment-tabs slug in Flex Fields playground

​
Basic usage

​
Standard segmented tabs

use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs\SegmentTab;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTextInput;

SegmentTabs::make('Account Settings')
    ->tabs([
        SegmentTab::make('General')
            ->icon('heroicon-o-user')
            ->schema([
                FlexTextInput::make('name'),
                FlexTextInput::make('email'),
            ]),
        SegmentTab::make('Security')
            ->icon('heroicon-o-lock')
            ->schema([
                FlexTextInput::make('password'),
            ]),
    ]);

​
Ghost variant with query persistence

SegmentTabs::make('Profile')
    ->variant('ghost')
    ->persistTabInQueryString('profile-tab')
    ->tabs([
        SegmentTab::make('Details')->schema([...]),
        SegmentTab::make('Billing')->schema([...]),
    ]);

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
tabs(array|Closure $tabs)Setup[]Array of SegmentTab components.
activeTab(int|Closure $index)Setup11-based index of the initially active tab.
persistTabInQueryString(string|null $key)SetupnullPersist active tab in URL. Default key: 'segment-tab'.
variant(string|Closure $variant)Setup'default'default (filled track) or ghost (transparent track).
color(string|Closure|null $color)SetupnullSelection accent color. Defaults to primary for ghost.
separators(bool|Closure $on)SetuptrueVertical dividers between tab segments.
fullWidth(bool|Closure $on)SetupfalseStretch tabs to full container width.
iconOnly(bool|Closure $on)SetupfalseHide tab labels; show icons only.
expandSelectedLabel(bool|Closure $on)SetupfalseAnimate the selected tab to a wider width.
size(string|Closure $size)Setup'md'Control size: sm, md, lg.

​
SegmentTab API

MethodDescription
make(string|Htmlable|Closure $label)Create a tab instance.
icon(mixed $icon)Tab icon.
tooltip(string|Closure $text)Hover tooltip for the tab.
schema(array|Closure $schema)Nested form/schema components.
badge(string|Closure $text)Optional badge shown on the tab.

​
Real-world examples

​
Multi-step profile editor

SegmentTabs::make('User Editor')
    ->variant('ghost')
    ->fullWidth()
    ->tabs([
        SegmentTab::make('Basic Info')
            ->icon('heroicon-o-identification')
            ->schema([
                FlexTextInput::make('first_name'),
                FlexTextInput::make('last_name'),
            ]),
        SegmentTab::make('Preferences')
            ->icon('heroicon-o-adjustments-horizontal')
            ->schema([
                Toggle::make('newsletter'),
                Select::make('theme')->options(['light' => 'Light', 'dark' => 'Dark']),
            ]),
    ]);

​
Playground

/admin/flex-fields-playground/segment-tabs See Playground for setup.
ComponentWhen to use instead
SegmentControlFor simple single-select form fields without nested schemas.
TranslatableFieldsFor multi-language form fields (uses SegmentTabs internally).
ItemCardGroupFor grouping rows that don’t need tab switching.

​
CSS classes (reference)

ClassRole
fff-segment-tabsRoot layout wrapper
fff-segment-tabs__headerTab switcher container
fff-segment-tabs__contentActive tab panel container
fff-segment-tab-panelIndividual tab content wrapper
Uses fff-segment-control classes for the tab switcher header.