Tabs

Tabs switch panels. The default is an underline (line). segment is the compact alternative. Card tabs are not part of v1.

Demos

Line

Active text uses brand-pressed. A 2px brand indicator sits on the divider. Arrow keys move between enabled tabs.

This course introduces the GK design system and how the components ship. Week 1 Tokens · Week 2 Form · Week 3 Overlays · Week 4 Display Reviews will show up here. Attachments are unavailable.

<gk-tabs aria-label="Course" :value="line" @update:value="onLine">
  <gk-tab-pane name="overview" tab="Overview">Overview copy.</gk-tab-pane>
  <gk-tab-pane name="syllabus" tab="Syllabus">Week plan.</gk-tab-pane>
  <gk-tab-pane name="reviews" tab="Reviews">Reviews land here.</gk-tab-pane>
  <gk-tab-pane name="files" tab="Files (disabled)" disabled>Unavailable.</gk-tab-pane>
</gk-tabs>

Segment

The track is the quiet button fill. The active segment is a 22% brand wash with pressed text. There is no underline and no card chrome.

Segment track with a brand-wash active tab.Board view.Timeline view.

<gk-tabs type="segment" aria-label="View" :value="segment" @change="onSegment">
  <gk-tab-pane name="list" tab="List">List view.</gk-tab-pane>
  <gk-tab-pane name="board" tab="Board">Board view.</gk-tab-pane>
  <gk-tab-pane name="timeline" tab="Timeline">Timeline view.</gk-tab-pane>
</gk-tabs>

Sizes

Line hit areas match Button: sm 28, md 34, lg 40. Segment tabs sit inside the track at 26 / 30 / 36.

Small line tabs.Item B.Large line tabs.Item B.

<gk-tabs size="sm" aria-label="Small">
  <gk-tab-pane name="a" tab="sm 28">Small tabs are 28px.</gk-tab-pane>
  <gk-tab-pane name="b" tab="Item B">Item B.</gk-tab-pane>
</gk-tabs>
<gk-tabs size="lg" aria-label="Large">
  <gk-tab-pane name="a" tab="lg 40">Large tabs are 40px.</gk-tab-pane>
  <gk-tab-pane name="b" tab="Item B">Item B.</gk-tab-pane>
</gk-tabs>

Disabled tab

Disabled panes stay in the list at 50% opacity and are skipped by click and keyboard.

Enabled panel.You cannot select this tab.The next enabled tab.

<gk-tab-pane name="files" tab="Files" disabled>Hidden until enabled.</gk-tab-pane>

Many tabs

The tab list scrolls horizontally and does not wrap. On a narrow viewport, swipe the tab list.

Scroll the tab list instead of wrapping.Design system.Frontend.Product strategy.Content marketing.Brand visual.Accessibility.Performance.

<gk-tabs aria-label="Categories">
  <gk-tab-pane name="all" tab="All">Scroll the tab list horizontally.</gk-tab-pane>
  <gk-tab-pane name="design" tab="Design system">Design.</gk-tab-pane>
  <!-- more panes; the tab list does not wrap -->
</gk-tabs>

Animation off

animated defaults to true (180ms panel fade and indicator slide). :animated="false" or animated="false" turns it off.

Panels swap without a fade.The other panel.

<gk-tabs animated="false" aria-label="Still">
  <gk-tab-pane name="a" tab="Instant">No panel fade.</gk-tab-pane>
  <gk-tab-pane name="b" tab="Other">Other panel.</gk-tab-pane>
</gk-tabs>

Icon label

Put rich label content in the pane’s tab slot. It replaces the tab string.

★ Overview The tab slot can hold an icon and a label. Plain string labels still work beside slotted ones.

<gk-tab-pane name="overview">
  <span slot="tab">★ Overview</span>
  Icon labels use the tab slot.
</gk-tab-pane>

API

Tabs Props

Prop	Type	Default
value	string	first enabled pane
default-value	string	—
type	'line' | 'segment'	'line'
size	'sm' | 'md' | 'lg'	'md'
animated	boolean	true
placement	'top'	'top'

value is controlled when you set it. With an empty value, default-value or the first enabled pane is selected. v1 placement is top only; a vertical tab list is deferred. There is no card type.

animated="false" is respected (the string "false" is not treated as true).

Tab Pane Props

Prop	Type	Default
name	string	—
tab	string	—
label	string	—
disabled	boolean	false

label aliases tab. The tab string wins when both are set. name is the value key and should be unique.

Tabs Slots

Name	Description
default	gk-tab-pane children
pane tab	Rich tab label. Replaces the tab text
pane default	Panel body

Tabs Events

Name	Description
update:value	Selection changed. detail: { value: string }. Bubbles; composed: true.
change	Same payload as update:value.

CSS Parts

Part	Description
tablist	Scrollable tab row
tab	One tab button
indicator	2px brand underline. Hidden for segment
panels	Panel stack
panel	The visible or hidden panel shell

Accessibility

• The list is role="tablist" with aria-orientation="horizontal". Pass aria-label on gk-tabs to name it.
• Each tab is role="tab" with aria-selected, aria-controls, and aria-disabled when needed.
• Each panel is role="tabpanel" with aria-labelledby. Inactive panels are hidden.
• Left / Right move among enabled tabs and wrap. Home and End jump to the ends. Tab leaves the tab list and enters the active panel.
• Only the selected enabled tab is in the tab order.
• Focus-visible uses the soft brand ring.

Vertical placement and card tabs are intentionally out of this version.