Tabs

A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window. Tabs can be used as a navigational widget for switching between sets of documents.

Source Code

uikit-react-core

Usage

The HvTabs is controlled via the value and onChange props. The value prop uses the tab’s index by default, or HvTab’s value if provided.

Page 1 content

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(0);


  return (
    <div className="flex flex-col w-full">
      <HvTabs value={value} onChange={(_, val) => setValue(val)}>
        <HvTab label="Page 1" />
        <HvTab label="Page 2" />
        <HvTab label="Page 3" />
      </HvTabs>
      <HvTypography className="p-sm">
        {`Page ${value + 1} content`}
      </HvTypography>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(0);

  return (
    <div className="flex flex-col w-full">
      <HvTabs value={value} onChange={(_, val) => setValue(val)}>
        <HvTab label="Page 1" />
        <HvTab label="Page 2" />
        <HvTab label="Page 3" />
      </HvTabs>
      <HvTypography className="p-sm">
        {`Page ${value + 1} content`}
      </HvTypography>
    </div>
  );
}

Variants

The tabs supports fullWidth and scrollable variants, based on the MUI Tabs component.

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(0);


  return (
    <div className="grid gap-xs w-full">
      <HvTabs variant="fullWidth" value={value}>
        <HvTab label="Clickable tab 1" />
        <HvTab label="Clickable tab 2" />
        <HvTab label="Clickable tab 3" />
      </HvTabs>
      <div className="max-w-400px">
        <HvTabs variant="scrollable" scrollButtons value={value}>
          {[...Array(12).keys()].map((i) => (
            <HvTab key={i} label={`Clickable tab ${i + 1}`} />
          ))}
        </HvTabs>
      </div>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(0);

  return (
    <div className="grid gap-xs w-full">
      <HvTabs variant="fullWidth" value={value}>
        <HvTab label="Clickable tab 1" />
        <HvTab label="Clickable tab 2" />
        <HvTab label="Clickable tab 3" />
      </HvTabs>
      <div className="max-w-400px">
        <HvTabs variant="scrollable" scrollButtons value={value}>
          {[...Array(12).keys()].map((i) => (
            <HvTab key={i} label={`Clickable tab ${i + 1}`} />
          ))}
        </HvTabs>
      </div>
    </div>
  );
}

Icons

Add icons to tabs using the icon and iconPosition props in HvTab.
To display icon-only tabs, set the label prop to undefined.

Show labels

Icon position:

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(0);
  const [showLabels, setShowLabels] = useState(true);
  const [iconPosition, setIconPosition] = useState("start");


  return (
    <div className="flex flex-col w-full gap-md">
      <div className="flex gap-sm">
        <HvCheckBox
          checked={showLabels}
          onChange={() => setShowLabels((p) => !p)}
          label="Show labels"
        />
        <div className="flex gap-sm items-center">
          <HvLabel>Icon position:</HvLabel>
          <HvSelect
            value={iconPosition}
            onChange={(_, value) => setIconPosition(value)}
            className="w-120px"
          >
            {["bottom", "end", "start", "top"].map((position) => (
              <HvOption key={position} value={position} label={position}>
                {position}
              </HvOption>
            ))}
          </HvSelect>
        </div>
      </div>
      <HvTabs value={value} onChange={(_, val) => setValue(val)}>
        {tabs.map((tab, index) => (
          <HvTab
            key={index}
            label={showLabels ? tab.label : undefined}
            icon={tab.icon}
            iconPosition={iconPosition}
          />
        ))}
      </HvTabs>
    </div>
  );
}


const tabs = [
  {
    label: "Clickable tab 1",
    icon: <Alert />,
  },
  {
    label: "Clickable tab 2",
    icon: <Reload />,
  },
  {
    label: "Clickable tab 3",
    icon: <Calendar />,
  },
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(0);
  const [showLabels, setShowLabels] = useState(true);
  const [iconPosition, setIconPosition] = useState("start");

  return (
    <div className="flex flex-col w-full gap-md">
      <div className="flex gap-sm">
        <HvCheckBox
          checked={showLabels}
          onChange={() => setShowLabels((p) => !p)}
          label="Show labels"
        />
        <div className="flex gap-sm items-center">
          <HvLabel>Icon position:</HvLabel>
          <HvSelect
            value={iconPosition}
            onChange={(_, value) => setIconPosition(value)}
            className="w-120px"
          >
            {["bottom", "end", "start", "top"].map((position) => (
              <HvOption key={position} value={position} label={position}>
                {position}
              </HvOption>
            ))}
          </HvSelect>
        </div>
      </div>
      <HvTabs value={value} onChange={(_, val) => setValue(val)}>
        {tabs.map((tab, index) => (
          <HvTab
            key={index}
            label={showLabels ? tab.label : undefined}
            icon={tab.icon}
            iconPosition={iconPosition}
          />
        ))}
      </HvTabs>
    </div>
  );
}

const tabs = [
  {
    label: "Clickable tab 1",
    icon: <Alert />,
  },
  {
    label: "Clickable tab 2",
    icon: <Reload />,
  },
  {
    label: "Clickable tab 3",
    icon: <Calendar />,
  },
];

Custom labels

The label prop on the HvTab component is a ReactNode and can be used to render any content, for example badges.

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(0);


  return (
    <HvTabs value={value} onChange={(_, val) => setValue(val)}>
      {tabs.map((tab, index) => (
        <HvTab
          key={index}
          className="w-120px"
          label={
            <HvBadge showCount label={tab.count}>
              <span>{tab.label}</span>
            </HvBadge>
          }
        />
      ))}
    </HvTabs>
  );
}


const tabs = [
  {
    label: "Inbox",
    count: 23,
  },
  {
    label: "Sent",
    count: undefined,
  },
  {
    label: "Trash",
    count: 145,
  },
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(0);

  return (
    <HvTabs value={value} onChange={(_, val) => setValue(val)}>
      {tabs.map((tab, index) => (
        <HvTab
          key={index}
          className="w-120px"
          label={
            <HvBadge showCount label={tab.count}>
              <span>{tab.label}</span>
            </HvBadge>
          }
        />
      ))}
    </HvTabs>
  );
}

const tabs = [
  {
    label: "Inbox",
    count: 23,
  },
  {
    label: "Sent",
    count: undefined,
  },
  {
    label: "Trash",
    count: 145,
  },
];

Floating

To use the tabs in floating mode set the floating prop to true.

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(0);


  return (
    <div className="flex flex-col w-full gap-md">
      <HvTabs floating value={value} onChange={(_, val) => setValue(val)}>
        <HvTab label="Videos" icon={<PlayVideo />} iconPosition="start" />
        <HvTab label="Photos" icon={<Picture />} iconPosition="start" />
        <HvTab label="Text files" icon={<DocWord />} iconPosition="start" />
      </HvTabs>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(0);

  return (
    <div className="flex flex-col w-full gap-md">
      <HvTabs floating value={value} onChange={(_, val) => setValue(val)}>
        <HvTab label="Videos" icon={<PlayVideo />} iconPosition="start" />
        <HvTab label="Photos" icon={<Picture />} iconPosition="start" />
        <HvTab label="Text files" icon={<DocWord />} iconPosition="start" />
      </HvTabs>
    </div>
  );
}

Table Tag