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 contains the value of the HvTab, which is its index by default.

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


  const handleChange: HvTabsProps["onChange"] = (evt, newValue) => {
    setValue(newValue);
  };


  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="auto" 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);

  const handleChange: HvTabsProps["onChange"] = (evt, newValue) => {
    setValue(newValue);
  };

  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="auto" value={value}>
          {[...Array(12).keys()].map((i) => (
            <HvTab key={i} label={`Clickable tab ${i + 1}`} />
          ))}
        </HvTabs>
      </div>
    </div>
  );
}

Icons

You can use icons in the tabs by passing the icon and iconPosition props to the HvTab component. If you only want to show icons with no text, you can hide the labels by setting 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>
  );
}

Switch Tag