Tab

Used to display content in a tabbed interface.

Demo

React
Vue

Color scheme

Size

Orientation

Variant

Indicator

Home tab content

Usage

React
Vue

import {
  Icon,
  Tab,
} from '@fintech-sandpit/ui/react';
import {
  faEnvelope,
  faHome,
  faInfo,
} from '@fortawesome/free-solid-svg-icons';

return (
  <Tab.Root>
    <Tab.List>
      <Tab.Item tab="home">
        <Icon
          as={faHome}
          boxSize="0.75em"
        />

        <span>
          Home
        </span>
      </Tab.Item>

      <Tab.Item
        tab="about"
        disabled
      >
        <Icon
          as={faInfo}
          boxSize="0.75em"
        />

        <span>
          About
        </span>
      </Tab.Item>

      <Tab.Item tab="contact">
        <Icon
          as={faEnvelope}
          boxSize="0.75em"
        />

        <span>
          Contact
        </span>
      </Tab.Item>
    </Tab.List>

    <Tab.Pane tab="home">
      Home tab content
    </Tab.Pane>

    <Tab.Pane tab="about">
      About tab content
    </Tab.Pane>

    <Tab.Pane tab="contact">
      Contact tab content
    </Tab.Pane>
  </Tab.Root>
);

<script setup lang="ts">
import {
  Icon,
  Tab,
} from '@fintech-sandpit/ui/vue';
import {
  faEnvelope,
  faHome,
  faInfo,
} from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Tab.Root>
    <Tab.List>
      <Tab.Item tab="home">
        <Icon
          :as="faHome"
          box-size="0.75em"
        />

        <span>
          Home
        </span>
      </Tab.Item>

      <Tab.Item
        tab="about"
        disabled
      >
        <Icon
          :as="faInfo"
          box-size="0.75em"
        />

        <span>
          About
        </span>
      </Tab.Item>

      <Tab.Item tab="contact">
        <Icon
          :as="faEnvelope"
          box-size="0.75em"
        />

        <span>
          Contact
        </span>
      </Tab.Item>
    </Tab.List>

    <Tab.Pane tab="home">
      Home tab content
    </Tab.Pane>

    <Tab.Pane tab="about">
      About tab content
    </Tab.Pane>

    <Tab.Pane tab="contact">
      Contact tab content
    </Tab.Pane>
  </Tab.Root>
</template>

Props

Tab Root Props

React
Vue

Name	Type	Default	Description
`value`	`string`	—	The controlled selected tab value
`defaultValue`	`string`	—	The default value of the selected tab
`colorScheme`	`ColorScheme`	`neutral`	The color scheme of the tab
`size`	`Size`	`md`	The size of the tab
`variant`	`TabVariant`	`line`	The variant of the tab
`orientation`	`Orientation`	`horizontal`	The orientation of the tab
`lazy`	`boolean`	`false`	Whether to lazy load the tab content

Name	Type	Default	Description
`value`	`string`	—	The controlled selected tab value
`default-value`	`string`	—	The default value of the selected tab
`color-scheme`	`ColorScheme`	`neutral`	The color scheme of the tab
`size`	`Size`	`md`	The size of the tab
`variant`	`TabVariant`	`line`	The variant of the tab
`orientation`	`Orientation`	`horizontal`	The orientation of the tab
`lazy`	`boolean`	`false`	Whether to lazy load the tab content

Tab List Props

Name	Type	Required	Default	Description
`indicator`	`boolean`		`false`	Whether to show the tab indicator

Name	Type	Default	Description
`tab`	`string`	—	The tab value
`icon`	`IconDefinition`	—	The icon of the tab
`counter`	`number`	—	The counter of the tab
`asChild`	`boolean`	`false`	Whether to render the tab as a child

Name	Type	Required	Default	Description
`tab`	`string`	Yes		The tab value
`icon`	`IconDefinition`		—	The icon of the tab
`counter`	`number`		—	The counter of the tab
`as-child`	`boolean`		`false`	Whether to render the tab as a child

Tab Pane Props

Name	Type	Required	Default	Description
`tab`	`string`	Yes	—	The tab value

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type Orientation = 'horizontal' | 'vertical'
type TabVariant = 'line' | 'subtle' | 'enclosed' | 'outline'