Skip to content
Anvil

Tabs

Long forms in parts, one tab at a time.

use Anvil\Schema\Layout\Tab;
use Anvil\Schema\Layout\Tabs;


Tabs::make()->tabs([
    Tab::make('General')->icon('info-circle')->columns(2)->schema([...]),
    Tab::make('Billing')->schema([...]),
]),

Tabs

Section titled “Tabs”
Method Effect
Tabs::make() the tab container
tabs([Tab, ...]) the tabs, in this order
hiddenOn(...) hides all tabs and their fields in operations

Tab

Section titled “Tab”
Method Effect Default
Tab::make('Heading') label of the tab
icon('info-circle') Bootstrap Icons name before the label none
columns(1–4) columns inside the tab 1
schema([...]) the components
hiddenOn(...) hides this tab and its fields in operations

Behaviour

Section titled “Behaviour”
  • All tabs are part of the form: fields in tabs that are not shown are submitted and validated like all others. An error opens the tab of the first invalid field.
  • The open tab is remembered in the browser tab (sessionStorage), keyed by the headings of the tabs: after saving, the user is back on the same tab.
  • The detail page shows the tabs as well.
  • Tabs work with the keyboard (arrow keys) and are announced as tabs by screen readers.

Related records of the detail page can be shown as tabs too, see As tabs.