tab-group

Tabs that switch panels on the same page. For tabs that change the URL, use tabs.

Example

Profile fields.

Laravel

<x-admin::tab-group group="g-tabs" label="Athlete" :tabs="['profile' => 'Profile', 'media' => ['label' => 'Media', 'count' => 12]]">
    <x-admin::tab-panel group="g-tabs" name="profile" active class="mt">Profile fields.</x-admin::tab-panel>
    <x-admin::tab-panel group="g-tabs" name="media" class="mt">Media fields.</x-admin::tab-panel>
</x-admin::tab-group>

Props

PropRequiredDefaultOptions
tabs[]
activenull
labelnull
groupnull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { TabGroup } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div  data-adm-tabs>
    <div class="adm-tabs" role="tablist"  aria-label="Athlete" >
                    <button type="button" class="adm-tab" role="tab" id="g-tabs-tab-profile" aria-controls="g-tabs-panel-profile" aria-selected="true" tabindex="0">Profile</button>
                    <button type="button" class="adm-tab" role="tab" id="g-tabs-tab-media" aria-controls="g-tabs-panel-media" aria-selected="false" tabindex="-1">Media <span class="adm-subtle">12</span></button>
            </div>
    <div class="adm-tab-panel mt" role="tabpanel" id="g-tabs-panel-profile" aria-labelledby="g-tabs-tab-profile" tabindex="0" >Profile fields.</div>
    <div class="adm-tab-panel mt" role="tabpanel" id="g-tabs-panel-media" aria-labelledby="g-tabs-tab-media" tabindex="0"  hidden >Media fields.</div>
</div>