Accessibility: Full

Translations: Not Needed

Tabs

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

Default

Vue

html

<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

Vue

html

<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>

All sizes

smmdlg

html

<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>

html

<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>

html

<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>

With Icons

Vue

html

<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

Vue

html

<HLTabs id="tabs-demo" placement="left">
  <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>

Just Tabs

Check the dev console!

line.vuesegment.vue

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>

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

line.vuesegment.vue

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>

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.

Vue

html

<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>

Disabled

Vue

html

<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>

With Arrow

Vue

html

<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()" />
      </HLIcon>
    </template>
    <template #suffix>
      <HLIcon class="m-auto px-2 w-auto">
        <ArrowRightIcon class="cursor-pointer" @click="handleClick(false)" />
      </HLIcon>
    </template>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane, renderTabWithIcon } 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

Custom Slot

Vue

html

<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="backgroundColor: var(--gray-100); border-radius: 4px;">
      <HLText size="md" weight="semibold">Custom Slot</HLText>
    </div>
  </template>
</HLTabs>

Tabs with `v-for` template

html

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

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

Import

Vue

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

Accessibility

Ensure the tab list uses role="tablist" plus an aria-label that explains the grouping.
Each tab should manage role="tab", aria-selected, tabindex, and aria-controls pointing to its panel.
Panels require role="tabpanel" with aria-labelledby referencing their owning tab.

Props

Tabs

Prop	Type	Default	Description
`placement`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Position of the tabs
`type`	`'line' \| 'segment'`	`'line'`	Style variant of the tabs
`value`	`string \| undefined`	`undefined`	Active tab
`defaultValue`	`string \| undefined`	`undefined`	Default active tab
`justifyContent`	`'start' \| 'end' \| 'space-around' \| 'space-between' \| 'space-evenly' \| 'center'`	`'start'`	Alignment of the tabs
`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`	Whether the tabs have a border
`offSet`	`string`	`'0px'`	Offset of the tabs

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

Tabs ​

Default ​

Segment Type ​

All sizes ​

With Icons ​

Placement ​

Just Tabs ​

Transparent Variants ​

Active Tab ​

Disabled ​

With Arrow ​

Overflow ​

Tabs with v-for template ​

Import ​

Accessibility ​

Props ​

Tabs ​

Tab, TabPane ​

renderTabWithIcon() ​

Slots ​

Tabs ​

TabPane ​

Tab ​

Emits ​

Tabs ​

Tabs

Default

Segment Type

All sizes

With Icons

Placement

Just Tabs

Transparent Variants

Active Tab

Disabled

With Arrow

Overflow

Tabs with `v-for` template

Import

Accessibility

Props

Tabs

Tab, TabPane

`renderTabWithIcon()`

Slots

Tabs

TabPane

Tab

Emits

Tabs