SegmentTabs

Schema layout component featuring segmented tabs with per-tab form schemas and query-string persistence.

← Back to Table of Contents

Summary

Schema layout component providing segmented tabs. Each tab wraps a nested form schema, allowing for clean organization of complex forms. Shares the same visual language as SegmentControl.

Class	Bjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs
Tab class	Bjanczak\FilamentFlexFields\Filament\Schemas\Components\SegmentTabs\SegmentTab
State	Local UI state (optional query-string persistence)
Playground	segment-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.

Method	Type	Default	Description
tabs(array|Closure $tabs)	Setup	[]	Array of SegmentTab components.
activeTab(int|Closure $index)	Setup	1	1-based index of the initially active tab.
persistTabInQueryString(string|null $key)	Setup	null	Persist 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)	Setup	null	Selection accent color. Defaults to primary for ghost.
separators(bool|Closure $on)	Setup	true	Vertical dividers between tab segments.
fullWidth(bool|Closure $on)	Setup	false	Stretch tabs to full container width.
iconOnly(bool|Closure $on)	Setup	false	Hide tab labels; show icons only.
expandSelectedLabel(bool|Closure $on)	Setup	false	Animate the selected tab to a wider width.
helperText(string|Htmlable|Closure|null $text)	Setup	null	Helper copy below the tab panels (same idea as form fields).
size(string|Closure $size)	Setup	'md'	Tab rail height at default density: sm 32 px, md 40 px, lg 48 px.
rounding(string|Closure|null $rounding)	Setup	full	none, native, md, lg, xl, full; null or default resolves to full.

Tab height and rounding

SegmentTabs::make('Settings')
    ->size('md') // 40 px including track padding
    ->rounding('lg') // 16 px, for this tab switcher only
    ->tabs([...]);

Rounding values are none (0), native (8 px), md (12 px), lg (16 px), xl (20 px) and full (pill). Omitting rounding(), passing null, or using default uses the full pill radius. Track, active indicator and segment buttons use the same instance radius. Nested fields retain their own radius and sizes. The separate SegmentControl form field retains its 32 / 36 / 42 px size scale.

SegmentTab API

Method	Description
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/segment-tabs

See Playground for setup.

---

Related components

Component	When to use instead
SegmentControl	For simple single-select form fields without nested schemas.
TranslatableFields	For multi-language form fields (uses SegmentTabs internally).
ItemCardGroup	For grouping rows that don’t need tab switching.

---

CSS classes (reference)

Class	Role
fff-segment-tabs	Root layout wrapper
fff-segment-tabs__header	Tab switcher container
fff-segment-tabs__content	Active tab panel container
fff-segment-tab-panel	Individual tab content wrapper

Uses fff-segment-control classes for the tab switcher header.

Runtime and composition

Tabs reuse SegmentControl presentation rather than copying its HTML. Initially active child assets are render-blocking; inactive panels load on activation and retire assets after their last consumer disappears. Local selection survives Livewire action morphs. Query persistence stores relative tab keys and preserves Livewire history state. Automatic horizontal overflow provides chevrons and fading edges; keyboard selection scrolls the active tab into view.