Tabs

Tabs components are Layout Fields that allow users to switch between different content areas within the same context. They are highly effective for breaking down large forms into logical, manageable pieces.

tabs.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'tabs_basic',
      kind: 'layout',
      type: 'tabs',
      props: {
        tabs: [
          {
            uid: 'tab_personal',
            label: 'Personal',
          },
          {
            uid: 'tab_work',
            label: 'Work',
          },
          {
            uid: 'tab_other',
            label: 'Other',
          },
        ],
        defaultOpen: 'tab_personal',
      },
      children: [
        {
          uid: 'tab_personal',
          kind: 'input',
          type: 'textinput',
          path: 'personal_email',
          label: 'Personal Email',
        },
        {
          uid: 'tab_work',
          kind: 'input',
          type: 'textinput',
          path: 'work_email',
          label: 'Work Email',
        },
        {
          uid: 'tab_other',
          kind: 'input',
          type: 'textarea',
          path: 'notes',
          label: 'Additional Notes',
        },
      ],
    },
  ],
});

tabs.json

{
  "form": [
    {
      "uid": "tabs_basic",
      "kind": "layout",
      "type": "tabs",
      "props": {
        "tabs": [
          { "uid": "tab_personal", "label": "Personal" },
          { "uid": "tab_work", "label": "Work" },
          { "uid": "tab_other", "label": "Other" }
        ],
        "defaultOpen": "tab_personal"
      },
      "children": [
        {
          "uid": "tab_personal",
          "kind": "input",
          "type": "textinput",
          "path": "personal_email",
          "label": "Personal Email"
        },
        {
          "uid": "tab_work",
          "kind": "input",
          "type": "textinput",
          "path": "work_email",
          "label": "Work Email"
        },
        {
          "uid": "tab_other",
          "kind": "input",
          "type": "textarea",
          "path": "notes",
          "label": "Additional Notes"
        }
      ]
    }
  ]
}

Props

Use these props to customize your Tabs component.

prop	type	description
tabs	array	Required. Array of tab definitions: { label: string, uid: string }
defaultOpen	string	The uid of the tab that should be open by default. Defaults to the first tab
renderMode	string	Either 'all' (renders hidden tabs in DOM) or 'activeOnly' (renders only the open tab). Defaults to 'all'

Styling

Tabs can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables used to style the tabs.

CSS Variable	Description
--gui-bg-default	Background color for tab buttons and panels
--gui-border-default	Border color for tab buttons and panels
--gui-text-default	Text color for labels
--gui-space-3	Padding inside tab buttons and panels
--gui-radius-md	Border radius for tab buttons and panels

Anatomy

This is the anatomy of the Tabs Component in case you want to use your CSS styles.

tabs-anatomy.html

<div class="gui-tabs">
  <nav class="gui-widget gui-widget--horizontal" id="tabs_uid">
    <ul role="tablist">
      <li role="presentation">
        <button type="button" role="tab" aria-selected="true" class="active" id="tab_tabs_uid_0">
          Personal
        </button>
      </li>
      <li role="presentation">
        <button type="button" role="tab" aria-selected="false" id="tab_tabs_uid_1">
          Work
        </button>
      </li>
      <li role="presentation">
        <button type="button" role="tab" aria-selected="false" id="tab_tabs_uid_2">
          Other
        </button>
      </li>
    </ul>
  </nav>

  <section role="tabpanel" id="tabpanel_tabs_uid_0" aria-labelledby="tab_tabs_uid_0">
    <div class="gui-widget">
      <!-- Child widgets for Personal tab -->
    </div>
  </section>

  <section role="tabpanel" id="tabpanel_tabs_uid_1" aria-labelledby="tab_tabs_uid_1" hidden>
    <!-- Content for Work tab (hidden) -->
  </section>

  <section role="tabpanel" id="tabpanel_tabs_uid_2" aria-labelledby="tab_tabs_uid_2" hidden>
    <!-- Content for Other tab (hidden) -->
  </section>
</div>