RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Tabs

The Tabs component provides a way to organize and navigate between different sections of content through tab-based navigation.

Default

The default line-style tabs render each section's content in its own HLTabPane.

Payment

Home

Configure

Pin

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

<template>
  <HLTabs id="tabs-demo">
    <HLTabPane name="payment" tab="Payment">
      Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards
    </HLTabPane>
    <HLTabPane name="home" tab="Home">
      Welcome to our Home Services! We offer a comprehensive suite of home services designed to make your life easier and more comfortable.
    </HLTabPane>
    <HLTabPane name="configure" tab="Configure">
      Configure your smart home settings to create the perfect automated environment.
    </HLTabPane>
    <HLTabPane name="pin" tab="Pin">
      Pin locations on your interactive map for easy reference and navigation. Our advanced mapping system allows you to: Whether you're
      planning a trip, marking business locations.
    </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

Segment Type

Set type="segment" to render the tabs as a segmented control.

Payment

Home

Configure

Pin

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

<template>
  <HLTabs id="tabs-demo" type="segment">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
    <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map for easy reference and navigation. </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

All sizes

The size prop controls the tab height and typography, with sm, md, and lg variants.

sm

Payment

Home

Configure

Pin

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

md

Payment

Home

Configure

Pin

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

lg

Payment

Home

Configure

Pin

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

<template>
  <HLTabs id="tabs-demo" size="sm" type="segment">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure"> Configure your smart home settings </HLTabPane>
    <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map </HLTabPane>
  </HLTabs>

  <HLTabs id="tabs-demo" size="md" type="segment">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure"> Configure your smart home settings </HLTabPane>
    <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map </HLTabPane>
  </HLTabs>

  <HLTabs id="tabs-demo" size="lg" type="segment">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure"> Configure your smart home settings </HLTabPane>
    <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

With Icons

Use renderTabWithIcon to render a tab label alongside an icon.

Payment

Configure

Pin

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

<template>
  <HLTabs id="tabs-demo">
    <HLTabPane name="payment" :tab="renderTabWithIcon({iconOnly: false, tab: 'Payment', icon: CreditCard01Icon, tabSize: 'md'})">
      Experience seamless payment processing with our secure payment gateway.
    </HLTabPane>
    <HLTabPane name="configure" :tab="renderTabWithIcon({iconOnly: false, tab: 'Configure', icon: Tool02Icon, tabSize: 'md'})"
      >Configure your smart home settings to create the perfect automated environment.
    </HLTabPane>
    <HLTabPane name="pin" :tab="renderTabWithIcon({iconOnly: false, tab: 'Pin', icon: Pin02Icon, tabSize: 'md'})"
      >Pin locations on your interactive map for easy reference and navigation.
    </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane, renderTabWithIcon } from '@platform-ui/highrise'
  import { CreditCard01Icon, Tool02Icon, Pin02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Placement

The placement prop positions the tab bar relative to the content. It accepts top (default), bottom, left, and right — the tab bar moves to that edge and the orientation follows, so left and right stack the tabs vertically.

top

Payment

Home

Configure

Payment panel content.

bottom

Payment

Home

Configure

Payment panel content.

left

Payment

Home

Configure

Payment panel content.

right

Payment

Home

Configure

Payment panel content.

<template>
  <HLTabs v-for="place in allPlacements" :key="place" :id="`tabs-placement-${place}`" :placement="place">
    <HLTabPane name="payment" tab="Payment">Payment panel content.</HLTabPane>
    <HLTabPane name="home" tab="Home">Home panel content.</HLTabPane>
    <HLTabPane name="configure" tab="Configure">Configure panel content.</HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTabPane } from '@platform-ui/highrise'

const allPlacements = ['top', 'bottom', 'left', 'right'] as const
</script>

INFO

With type="segment", the left and right placements render as a vertical bar rather than a segmented control, since a segmented control only reads correctly on a horizontal axis.

Trigger

trigger decides how a tab becomes active. click is the default. hover activates on pointer-over, which suits preview-style navigation. manual disables both, leaving the tabs controlled-only — bind value (or v-model:value) and set it from your own logic, as the With Arrow example does.

hover — move the pointer across the tabs

Payment

Home

Configure

Activated by hovering the tab.

manual — clicking a tab does nothing; use the buttons

Payment

Home

Configure

Payment panel content.

hover

<template>
  <HLTabs id="tabs-trigger-hover" trigger="hover">
    <HLTabPane name="payment" tab="Payment">Activated by hovering the tab.</HLTabPane>
    <HLTabPane name="home" tab="Home">Home panel content.</HLTabPane>
    <HLTabPane name="configure" tab="Configure">Configure panel content.</HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

manual

<template>
  <!-- Clicking a tab does nothing — `value` is the only thing that switches panels -->
  <HLButton id="tabs-manual-payment" size="xs" @click="value = 'payment'">Payment</HLButton>
  <HLButton id="tabs-manual-home" size="xs" @click="value = 'home'">Home</HLButton>

  <HLTabs id="tabs-trigger-manual" trigger="manual" :value="value">
    <HLTabPane name="payment" tab="Payment">Payment panel content.</HLTabPane>
    <HLTabPane name="home" tab="Home">Home panel content.</HLTabPane>
    <HLTabPane name="configure" tab="Configure">Configure panel content.</HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HLTabs, HLTabPane, HLButton } from '@platform-ui/highrise'

const value = ref('payment')
</script>

Border and Offset

Two props adjust the space and rule around the tab bar:

• noBorder removes the separator line between the tab bar and the panel content.
• offSet adds padding between the tab bar and that separator, on whichever side faces the content — it becomes bottom padding for placement="top", top padding for bottom, and so on. Pass any CSS length.

Default

Payment

Home

Payment panel content.

noBorder

Payment

Home

Payment panel content.

offSet: 16px

Payment

Home

Payment panel content.

<template>
  <HLTabs id="tabs-border-default">
    <HLTabPane name="payment" tab="Payment">Payment panel content.</HLTabPane>
    <HLTabPane name="home" tab="Home">Home panel content.</HLTabPane>
  </HLTabs>

  <!-- Drops the rule between the tab bar and the content -->
  <HLTabs id="tabs-border-none" no-border>
    <HLTabPane name="payment" tab="Payment">Payment panel content.</HLTabPane>
    <HLTabPane name="home" tab="Home">Home panel content.</HLTabPane>
  </HLTabs>

  <!-- Pushes the tab bar away from the rule -->
  <HLTabs id="tabs-border-offset" off-set="16px">
    <HLTabPane name="payment" tab="Payment">Payment panel content.</HLTabPane>
    <HLTabPane name="home" tab="Home">Home panel content.</HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

Tabs Without Panels

Use HLTab instead of HLTabPane when you only need the tab bar — no panel content is rendered, so you manage what appears elsewhere on the page yourself. Listen to @update:value to know which tab was selected. This is the right choice when the tabs drive a separate region, such as a sidebar or a routed view.

Payment

Configure

Pin

Payment

Configure

Pin

line.vue

<template>
  <HLTabs id="just-tabs-demo" @update:value="console.log">
    <HLTab name="payment-tab" tabKey="payment" tab="Payment" />
    <HLTab name="configure-tab" tabKey="configure" tab="Configure" />
    <HLTab name="pin-tab" tabKey="pin" tab="Pin" />
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTab } from '@platform-ui/highrise'
</script>

segment.vue

<template>
  <HLTabs id="just-tabs-demo-segment" type="segment" @update:value="console.log">
    <HLTab name="payment-tab-segment" tabKey="payment">
      <HLIcon size="20">
        <CreditCard01Icon />
      </HLIcon>
      Payment
    </HLTab>
    <HLTab name="configure-tab-segment" tabKey="configure">
      <HLIcon size="20">
        <Tool02Icon />
      </HLIcon>
      Configure
    </HLTab>
    <HLTab name="pin-tab-segment" tabKey="pin">
      <HLIcon size="20">
        <Pin02Icon />
      </HLIcon>
      Pin
    </HLTab>
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTab } from '@platform-ui/highrise'
</script>

Transparent Variants

Set the sidebar prop to render tabs with a transparent background suited for sidebar layouts.

line.vue

<template>
  <HLTabs id="just-tabs-demo" @update:value="console.log" placement="left" sidebar>
    <HLTab name="configure-tab" tabKey="configure" tab="Configure" iconOnly>
      <HLIcon size="18">
        <CreditCard01Icon />
      </HLIcon>
    </HLTab>
    <HLTab name="payment-tab" tabKey="payment" tab="Payment" iconOnly>
      <HLIcon size="18">
        <Tool02Icon />
      </HLIcon>
    </HLTab>
    <HLTab name="pin-tab" tabKey="pin" tab="Pin" iconOnly>
      <HLIcon size="18">
        <Pin02Icon />
      </HLIcon>
    </HLTab>
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTab, HLIcon } from '@platform-ui/highrise'
import { CreditCard01Icon, Tool02Icon, Pin02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

segment.vue

<template>
  <HLTabs id="just-tabs-demo-segment" type="segment" @update:value="console.log" placement="right" sidebar>
    <HLTab name="payment-tab-segment" tabKey="payment" iconOnly>
      <HLIcon size="18">
        <CreditCard01Icon />
      </HLIcon>
    </HLTab>
    <HLTab name="configure-tab-segment" tabKey="configure" iconOnly>
      <HLIcon size="18">
        <Tool02Icon />
      </HLIcon>
    </HLTab>
    <HLTab name="pin-tab-segment" tabKey="pin" iconOnly>
      <HLIcon size="18">
        <Pin02Icon />
      </HLIcon>
    </HLTab>
  </HLTabs>
</template>

<script setup lang="ts">
import { HLTabs, HLTab, HLIcon } from '@platform-ui/highrise'
import { CreditCard01Icon, Tool02Icon, Pin02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Active Tab

default-value prop is used to set the active tab.

Payment

Home

Configure

Welcome to our Home Services! We offer a comprehensive suite of home services designed to make your life easier and more comfortable. Our services include:

<template>
  <HLTabs id="tabs-demo" default-value="home">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

Disabled

Add the disabled prop to an HLTabPane to make that tab non-interactive.

Payment

Home

Configure

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

<template>
  <HLTabs id="tabs-demo">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
    <HLTabPane name="home" tab="Home" disabled> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

With Arrow

Use the prefix and suffix slots to add navigation arrows that change the active tab.

Payment

Home

Configure

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.

<template>
  <HLTabs id="tabs-demo" :value="selValue" @update:value="updateValue">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure">
      Configure your smart home settings to create the perfect automated environment.
    </HLTabPane>
    <template #prefix>
      <HLIcon class="m-auto px-2 w-auto">
        <ArrowLeftIcon class="cursor-pointer" @click="handleClick(false)" />
      </HLIcon>
    </template>
    <template #suffix>
      <HLIcon class="m-auto px-2 w-auto">
        <ArrowRightIcon class="cursor-pointer" @click="handleClick()" />
      </HLIcon>
    </template>
  </HLTabs>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLTabs, HLTabPane, HLIcon } from '@platform-ui/highrise'
  import { ArrowLeftIcon, ArrowRightIcon } from '@gohighlevel/ghl-icons/24/outline'
  const selValue = ref('payment')
  const tabKeys = ['home', 'payment', 'configure']
  const handleClick = (increment = true) => {
    const len = tabKeys.length
    const index = tabKeys.indexOf(selValue.value)
    const newIndex =
      index + (increment ? 1 : -1) < 0
        ? len - 1 // loop around in reverse
        : (index + (increment ? 1 : -1)) % len // loop around
    selValue.value = tabKeys[newIndex]
  }
  const updateValue = newVal => {
    selValue.value = newVal
  }
</script>

Overflow

When the number of tabs exceeds max-visible-tabs, the extra tabs collapse behind the overflow slot, and slots like add-tab, end-actions, and custom-slot add supporting controls.

Payment

Home

Configure

2000

Pin

Custom Slot

Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards, digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts. Enjoy features like recurring payments, saved payment methods, and comprehensive transaction history. We prioritize security with end-to-end encryption and fraud protection measures. Whether you're a small business or large enterprise, our payment solutions scale to meet your needs.

<template>
  <HLTabs type="segment" placement="top" :max-visible-tabs="4">
    <HLTabPane
      name="payment"
      :tab="renderTabWithIcon({iconOnly: false, tab: 'Payment', icon: CreditCard01Icon, tabSize: 'md'})"
      key="payments"
    >
    Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards,
    digital wallets, and bank transfers. Our system ensures fast, reliable transactions with real-time confirmation and detailed receipts.
    Enjoy features like recurring payments, saved payment methods, and comprehensive transaction history. We prioritize security with
    end-to-end encryption and fraud protection measures. Whether you're a small business or large enterprise, our payment solutions scale to
    meet your needs.
  </HLTabPane>
  <HLTabPane name="home" :tab="renderTabWithIcon({iconOnly: false, tab: 'Home', icon: Home04Icon, tabSize: 'md'})">
    Welcome to our Home Services! We offer a comprehensive suite of home services designed to make your life easier and more comfortable.
    Our services include: - Home cleaning and maintenance - Gardening and landscaping - Handyman and repair services - Home security and
    automation - Home improvement and renovation We prioritize the quality of our services with industry-leading standards and customer
    satisfaction. Our team is dedicated to providing reliable, efficient, and personalized solutions to meet your unique needs.
  </HLTabPane>
  <HLTabPane name="configure" :tab="renderTabWithIcon({iconOnly: false, tab: 'Configure', icon: Tool02Icon, tabSize: 'md', badge: '2000'})">
    Configure your smart home settings to create the perfect automated environment. Our intuitive interface lets you: - Set up custom
    automation routines - Control lighting, temperature, and security systems - Create schedules for different times of day - Manage
    multiple smart devices from one dashboard - Set up voice control integration - Monitor energy usage and optimize efficiency All settings
    are instantly synced across your devices, ensuring seamless control whether you're home or away. Our smart home platform adapts to your
    lifestyle while prioritizing security and energy efficiency.
  </HLTabPane>
  <HLTabPane name="pin" :tab="renderTabWithIcon({iconOnly: false, tab: 'Pin', icon: Pin02Icon, tabSize: 'md'})">
    Pin locations on your interactive map for easy reference and navigation. Our advanced mapping system allows you to: - Mark important
    locations and points of interest - Add custom labels and descriptions - Organize pins by categories or colors - Share pinned locations
    with team members - Track visited locations - Save favorite spots for quick access Whether you're planning a trip, marking business
    locations, or creating a custom tour guide, our pin system helps you keep track of all your important places efficiently and
    intuitively.
  </HLTabPane>
  <HLTabPane name="song" :tab="renderTabWithIcon({iconOnly: false, tab: 'Song', icon: MusicIcon, tabSize: 'md'})">
    Song is a song from the album "The Beatles" - Movie: "The Beatles: Get Back" - Director: Peter Jackson - Released: 2021 - Genre:
    Documentary - Rating: 8.5/10 - Cast: Paul McCartney, Ringo Starr, George Harrison, John Lennon - Plot: A documentary about the making of
    the album "Let It Be" by The Beatles.
  </HLTabPane>
  <HLTabPane name="movie" :tab="renderTabWithIcon({iconOnly: false, tab: 'Movie', icon: VideoRecorderIcon, tabSize: 'md'})">
    Movie is a movie from the album "The Beatles" - Movie: "The Beatles: Get Back" - Director: Peter Jackson - Released: 2021 - Genre:
    Documentary - Rating: 8.5/10 - Cast: Paul McCartney, Ringo Starr, George Harrison, John Lennon - Plot: A documentary about the making of
    the album "Let It Be" by The Beatles.
  </HLTabPane>
  <HLTabPane name="cricket" :tab="renderTabWithIcon({iconOnly: false, tab: 'Cricket', icon: Moon01Icon, tabSize: 'md'})">
    Cricket is a game from England - Country: England - Founded: 1844 - Players: 11 - Equipment: Bat, Ball, Wicket - Rules: 20-20 - Field:
    Oval - Score: 200/5
  </HLTabPane>
  <HLTabPane name="hockey" :tab="renderTabWithIcon({iconOnly: false, tab: 'Hockey', icon: YoutubeIcon, tabSize: 'md'})">
    Hockey is a game from England - Country: India - Founded: 1952 - Players: 11 - Equipment: Stick, Puck, Net - Rules: 3-on-3 - Field: Ice
    - Score: 2-1
  </HLTabPane>
  <HLTabPane name="football" :tab="renderTabWithIcon({iconOnly: false, tab: 'Football', icon: WifiIcon, tabSize: 'md'})">
    Football is a game from England - Country: England - Founded: 1844 - Players: 11 - Equipment: Ball, Net
  </HLTabPane>
  <HLTabPane name="basketball" :tab="renderTabWithIcon({iconOnly: false, tab: 'Basketball', icon: WifiOffIcon, tabSize: 'md'})">
    Basketball is a game from England - Country: England - Founded: 1844 - Players: 11 - Equipment: Ball, Net
  </HLTabPane>
  <HLTabPane name="tennis" :tab="renderTabWithIcon({iconOnly: false, tab: 'Tennis', icon: Wind01Icon, tabSize: 'md'})">
    Tennis is a game from England - Country: England - Founded: 1844 - Players: 11 - Equipment: Ball, Net
  </HLTabPane>
  <HLTabPane name="golf" :tab="renderTabWithIcon({iconOnly: false, tab: 'Golf', icon: Wind02Icon, tabSize: 'md'})">
    Golf is a game from England - Country: England - Founded: 1844 - Players: 11 - Equipment: Ball, Net
  </HLTabPane>
  <template #overflow>
    <HLButton id="tabs-dropdown-button" size="3xs" variant="ghost">
      <template #icon>
        <DotsHorizontalIcon />
      </template>
    </HLButton>
  </template>
  <template #add-tab>
    <HLButton id="custom-slot-button" size="3xs" variant="ghost">
      <template #icon><PlusIcon /></template>
    </HLButton>
  </template>
  <template #end-actions>
    <HLButton id="end-slot-button" size="xs" variant="ghost">
      <template #iconLeft><PlaceholderIcon /></template>
      share
    </HLButton>
  </template>
    <template #custom-slot>
      <div id="custom-slot-content" class="w-full flex justify-center" style="background-color: var(--gray-100); border-radius: 4px;">
        <HLText size="md" weight="semibold">Custom Slot</HLText>
      </div>
    </template>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane, HLButton, HLText, renderTabWithIcon } from '@platform-ui/highrise'
  import {
    CreditCard01Icon,
    Home04Icon,
    Tool02Icon,
    Pin02Icon,
    MusicIcon,
    VideoRecorderIcon,
    Moon01Icon,
    YoutubeIcon,
    WifiIcon,
    WifiOffIcon,
    Wind01Icon,
    Wind02Icon,
    DotsHorizontalIcon,
    PlusIcon,
    PlaceholderIcon,
  } from '@gohighlevel/ghl-icons/24/outline'
</script>

Rendering Tabs from an Array

Render tabs dynamically by iterating an array of tab definitions with v-for, rather than writing each pane out by hand.

Payment

Home

Configure

Payment, payment

<template>
  <HLTabs value="payment">
    <HLTabPane :name="tab.name" :tab="tab.tab" v-for="tab in tabArray" :key="tab.name"> {{ tab.tab }}, {{ tab.name }} </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'

  const tabArray = [
    {
      name: 'payment',
      tab: 'Payment',
    },
    {
      name: 'home',
      tab: 'Home',
    },
    {
      name: 'configure',
      tab: 'Configure',
    },
  ]
</script>

Import

import { HLTabs, HLTabPane, HLTab, renderTabWithIcon } from '@platform-ui/highrise'

Accessibility

• Ensure the tablist has an aria-label to describe the tab group (e.g., aria-label="Settings")

ARIA roles and attributes

• The tab list container has role="tablist" and aria-orientation (horizontal or vertical based on placement).
• Each tab has role="tab", aria-selected, tabindex (0 for active, -1 for others), and aria-disabled when disabled.
• Each panel has role="tabpanel", tabindex="0", and aria-labelledby referencing its tab.

Keyboard navigation

• Tab focuses the active tab, arrow keys navigate between tabs, Home/End jump to first/last, Enter/Space activates the tab.

Props

Tabs

Prop	Type	Default	Description
id	string | undefined	undefined	Custom ID for the tabs instance. Used to generate ARIA IDs for tabs and panels (e.g., {id}-tab-{name}, {id}-panel-{name}). Auto-generated when not provided.
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Position of the tabs
type	'line' | 'segment'	'line'	Style variant of the tabs
trigger	'click' | 'hover' | 'manual'	'click'	Activation behavior. 'manual' keeps tabs controlled-only (set value / v-model:value from parent logic).
value	string | undefined	undefined	Active tab
defaultValue	string | undefined	undefined	Default active tab
justifyContent	'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'center'	undefined	Alignment of the tabs along the bar. When unset, no alignment is applied and tabs sit at their natural start position. Ignored when type="segment".
maxVisibleTabs	number	5	Maximum number of visible tabs
sidebar	boolean	false	Enable the sidebar (transparent) variant of tabs
size	'sm' | 'md' | 'lg' | 'xl' | '2xl'	'md'	Size of the tabs
theme	'primary' | 'neutral'	'primary'	Theme of the tabs
noBorder	boolean	false	Set to true to remove the separator line between the tab bar and the panel content
offSet	string	'0px'	Padding between the tab bar and the separator, applied on the side facing the content (bottom for placement="top", top for bottom, and so on). Any CSS length.

Tab, TabPane

Prop	Type	Default	Description
disabled	boolean	false	Whether the tab is disabled
iconOnly	boolean	false	Whether the tab content contains icon only
name	string | undefined	undefined	Name of the tab
tab	string | VNode | (() => VNodeChild) | undefined	undefined	Text of the tab
tabKey	string	undefined	Unique key of the tab

renderTabWithIcon()

type renderTabWithIconProps = {
  tab: string | number
  tabSize: HLTabsSize
  icon?: () => VNodeChild
  badge?: string | number
  iconOnly?: boolean
}
type renderTabWithIcon = (props: renderTabWithIconProps) => VNode | (() => VNodeChild)

Slots

Tabs

Name	Parameters	Description
prefix	()	Content before the tabs (e.g., left arrow)
suffix	()	Content after the tabs (e.g., right arrow)
default	()	Default content for the tabs
overflow	()	Content for the overflow button
add-tab	()	Content for the add tab button
end-actions	()	Content for the end actions
custom-slot	()	Content for the custom slot

TabPane

Name	Parameters	Description
default	()	Default content for the tab

Tab

Name	Parameters	Description
default	()	Default content for the tab

Emits

Tabs

Name	Description
@update:value	Emitted when the active tab changes