Tabs 10.17.4

ARIA

RTL

Tabs to allow users to navigate easily between views within the same context.

Each tab should contain content that is distinct from other tabs in a set for example, tabs can present different sections of news, different genres of music, or different themes of documents.

Based on Headless UI.

Anatomy

<Tabs>
  <Tabs.List>
    <Tabs.Tab>...</Tabs.Tab> OR <Tabs.Pill>...</Tabs.Pill>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>...</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Default

Tabs are built using <Tabs.Tab /> components. By default the first tab is visible.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const DefaultExample = () => (
  <Tabs>
    <Tabs.List>
      <Tabs.Tab>Tab 1</Tabs.Tab>
      <Tabs.Tab>Tab 2</Tabs.Tab>
      <Tabs.Tab>Tab 3</Tabs.Tab>
    </Tabs.List>
    <Tabs.Panels>
      <Tabs.Panel>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
        ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </Tabs.Panel>
      <Tabs.Panel>
        It has survived not only five centuries, but also the leap into
        electronic typesetting, remaining essentially unchanged. It was
        popularized in the 1960s with the release of Letraset sheets containing
        Lorem Ipsum passages, and more recently with desktop publishing software
        like Aldus PageMaker including versions of Lorem Ipsum.
      </Tabs.Panel>
      <Tabs.Panel>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtedly source.
      </Tabs.Panel>
    </Tabs.Panels>
  </Tabs>
);

export default DefaultExample;

Sizes

Tab:

Pill:

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const sharedPillClassName = "border border-beerus";

const Sizes = () => (
  <div className="flex flex-col gap-4">
    <p>Tab:</p>
    <div className="flex flex-col justify-between w-full gap-10">
      <Tabs>
        <Tabs.List size="sm">
          <Tabs.Tab>Tab 1 (sm)</Tabs.Tab>
          <Tabs.Tab>Tab 2 (sm)</Tabs.Tab>
          <Tabs.Tab>Tab 3 (sm)</Tabs.Tab>
        </Tabs.List>
      </Tabs>
      <Tabs>
        <Tabs.List>
          <Tabs.Tab>Tab 1 (md)</Tabs.Tab>
          <Tabs.Tab>Tab 2 (md)</Tabs.Tab>
          <Tabs.Tab>Tab 3 (md)</Tabs.Tab>
        </Tabs.List>
      </Tabs>
    </div>
    <p className="mt-10">Pill:</p>
    <div className="flex flex-col justify-between w-full gap-10">
      <Tabs>
        <Tabs.List size="sm">
          <Tabs.Pill className={sharedPillClassName}>Tab 1 (sm)</Tabs.Pill>
          <Tabs.Pill className={sharedPillClassName}>Tab 2 (sm)</Tabs.Pill>
          <Tabs.Pill className={sharedPillClassName}>Tab 3 (sm)</Tabs.Pill>
        </Tabs.List>
      </Tabs>
      <Tabs>
        <Tabs.List>
          <Tabs.Pill className={sharedPillClassName}>Tab 1 (md)</Tabs.Pill>
          <Tabs.Pill className={sharedPillClassName}>Tab 2 (md)</Tabs.Pill>
          <Tabs.Pill className={sharedPillClassName}>Tab 3 (md)</Tabs.Pill>
        </Tabs.List>
      </Tabs>
    </div>
  </div>
);

export default Sizes;

Default with Pill

Tabs are built using <Tabs.Pill /> components. By default the first tab is visible.

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const PillDefault = () => {
  return (
    <Tabs>
      <Tabs.List>
        <Tabs.Pill
          className={({ selected }: { selected: boolean }) =>
            selected ? "" : "border border-beerus hover:bg-gohan"
          }
        >
          Tab 1
        </Tabs.Pill>
        <Tabs.Pill
          className={({ selected }: { selected: boolean }) =>
            selected ? "" : "border border-beerus hover:bg-gohan"
          }
        >
          Tab 2
        </Tabs.Pill>
        <Tabs.Pill
          className={({ selected }: { selected: boolean }) =>
            selected ? "" : "border border-beerus hover:bg-gohan"
          }
        >
          Tab 3
        </Tabs.Pill>
      </Tabs.List>
      <Tabs.Panels>
        <Tabs.Panel>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry&apos;s standard dummy text
          ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </Tabs.Panel>
        <Tabs.Panel>
          It has survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged. It was
          popularized in the 1960s with the release of Letraset sheets
          containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem
          Ipsum.
        </Tabs.Panel>
        <Tabs.Panel>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It
          has roots in a piece of classical Latin literature from 45 BC, making
          it over 2000 years old. Richard McClintock, a Latin professor at
          Hampden-Sydney College in Virginia, looked up one of the more obscure
          Latin words, consectetur, from a Lorem Ipsum passage, and going
          through the cites of the word in classical literature, discovered the
          undoubtedly source.
        </Tabs.Panel>
      </Tabs.Panels>
    </Tabs>
  );
};

export default PillDefault;

Segment control view

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const SegmentControlView = () => (
  <>
    <Tabs>
      <Tabs.Segment size="sm">
        <Tabs.Pill>Tab 1</Tabs.Pill>
        <Tabs.Pill>Tab 2</Tabs.Pill>
        <Tabs.Pill>Tab 3</Tabs.Pill>
      </Tabs.Segment>
    </Tabs>
    <Tabs>
      <Tabs.Segment>
        <Tabs.Pill>Tab 1</Tabs.Pill>
        <Tabs.Pill>Tab 2</Tabs.Pill>
        <Tabs.Pill>Tab 3</Tabs.Pill>
      </Tabs.Segment>
    </Tabs>
  </>
);

export default SegmentControlView;

Selected Index

By default the tabs is automatically handled by the component.If you'd change manually, or select a specific tab you can use the prop selectedIndex

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const SelectedIndex = () => (
  <>
    <Tabs selectedIndex={0}>
      <Tabs.List>
        <Tabs.Tab>Tab 1</Tabs.Tab>
        <Tabs.Tab>Tab 2</Tabs.Tab>
        <Tabs.Tab>Tab 3</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panels>
        <Tabs.Panel>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry&apos;s standard dummy text
          ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </Tabs.Panel>
        <Tabs.Panel>
          It has survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged. It was
          popularized in the 1960s with the release of Letraset sheets
          containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem
          Ipsum.
        </Tabs.Panel>
        <Tabs.Panel>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It
          has roots in a piece of classical Latin literature from 45 BC, making
          it over 2000 years old. Richard McClintock, a Latin professor at
          Hampden-Sydney College in Virginia, looked up one of the more obscure
          Latin words, consectetur, from a Lorem Ipsum passage, and going
          through the cites of the word in classical literature, discovered the
          undebatable source.
        </Tabs.Panel>
      </Tabs.Panels>
    </Tabs>
    <Tabs selectedIndex={0}>
      <Tabs.Segment size="sm">
        <Tabs.Pill>Tab 1</Tabs.Pill>
        <Tabs.Pill>Tab 2</Tabs.Pill>
        <Tabs.Pill>Tab 3</Tabs.Pill>
      </Tabs.Segment>
    </Tabs>
  </>
);

export default SelectedIndex;

Selected Index - Segment control view

"use client";

import { useState } from "react";
import { Tabs } from "@heathmont/moon-core-tw";

const SelectedIndexSegment = () => {
  const [selectedIndex, setSelectedIndex] = useState<number>(0);

  return (
    <>
      <Tabs
        selectedIndex={selectedIndex}
        onChange={(tab) => {
          alert(`Current Tab: ${tab + 1}`);
          setSelectedIndex(tab);
        }}
      >
        <Tabs.Segment size="sm">
          <Tabs.Pill>Tab 1</Tabs.Pill>
          <Tabs.Pill>Tab 2</Tabs.Pill>
          <Tabs.Pill>Tab 3</Tabs.Pill>
        </Tabs.Segment>
      </Tabs>

      <Tabs
        selectedIndex={0}
        onChange={(tab) => {
          alert(`Current Tab: ${tab + 1}`);
          setSelectedIndex(tab);
        }}
      >
        <Tabs.Segment size="sm">
          <Tabs.Pill>Tab 1</Tabs.Pill>
          <Tabs.Pill disabled>Tab 2</Tabs.Pill>
          <Tabs.Pill>Tab 3</Tabs.Pill>
        </Tabs.Segment>
      </Tabs>
    </>
  );
};

export default SelectedIndexSegment;

Tabs only view

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const TabsOnlyView = () => (
  <div className="flex flex-col gap-4">
    <Tabs>
      <Tabs.List>
        <Tabs.Tab>Tab 1</Tabs.Tab>
        <Tabs.Tab>Tab 2</Tabs.Tab>
        <Tabs.Tab>Tab 3</Tabs.Tab>
      </Tabs.List>
    </Tabs>

    <Tabs>
      <Tabs.List>
        <Tabs.Pill className="border border-beerus hover:bg-gohan">
          Tab 1
        </Tabs.Pill>
        <Tabs.Pill className="border border-beerus hover:bg-gohan">
          Tab 2
        </Tabs.Pill>
        <Tabs.Pill className="border border-beerus hover:bg-gohan">
          Tab 3
        </Tabs.Pill>
      </Tabs.List>
    </Tabs>
  </div>
);

export default TabsOnlyView;

With custom styles

"use client";

import { Tabs } from "@heathmont/moon-core-tw";

const tabs = ["Tab 1", "Tab 2", "Tab 3"];

const WithCustomStyle = () => (
  <div className="flex flex-col gap-4">
    <Tabs>
      <Tabs.List>
        {tabs.map((tab) => (
          <Tabs.Tab
            key={tab}
            className={({ selected }: { selected: boolean }) =>
              `hover:text-hit after:bg-hit ${selected && "text-hit"}`
            }
          >
            {tab}
          </Tabs.Tab>
        ))}
      </Tabs.List>
    </Tabs>

    <Tabs>
      <Tabs.List>
        {tabs.map((tab) => (
          <Tabs.Pill
            key={tab}
            className="hover:bg-hit/30 moon-selected:bg-hit/30"
          >
            <span className="moon-selected:text-hit">{tab}</span>
          </Tabs.Pill>
        ))}
      </Tabs.List>
    </Tabs>
  </div>
);

export default WithCustomStyle;

With Handler

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undebatable source.

"use client";

import { useState } from "react";
import { Tabs } from "@heathmont/moon-core-tw";

const WithHandler = () => {
  const [selectedIndex, setSelectedIndex] = useState(2);
  return (
    <Tabs selectedIndex={selectedIndex} onChange={setSelectedIndex}>
      <Tabs.List>
        <Tabs.Tab>Tab 1</Tabs.Tab>
        <Tabs.Tab>Tab 2</Tabs.Tab>
        <Tabs.Tab>Tab 3</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panels>
        <Tabs.Panel>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry&apos;s standard dummy text
          ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </Tabs.Panel>
        <Tabs.Panel>
          It has survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged. It was
          popularized in the 1960s with the release of Letraset sheets
          containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem
          Ipsum.
        </Tabs.Panel>
        <Tabs.Panel>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It
          has roots in a piece of classical Latin literature from 45 BC, making
          it over 2000 years old. Richard McClintock, a Latin professor at
          Hampden-Sydney College in Virginia, looked up one of the more obscure
          Latin words, consectetur, from a Lorem Ipsum passage, and going
          through the cites of the word in classical literature, discovered the
          undebatable source.
        </Tabs.Panel>
      </Tabs.Panels>
    </Tabs>
  );
};

export default WithHandler;

Tabs

These are props specific to the Tabs component:

Name	Type	Default
onChange	(index: number) => void	-
selectedIndex	number	-

Tabs.List

These are props specific to the Tabs.List component:

Name	Type	Default
className	string	-
size	"sm" \| "md"	md

Tabs.Segment

These are props specific to the Tabs.Segment component:

Name	Type	Default
className	string	-
size	"sm" \| "md"	md

Tabs.Tab

These are props specific to the Tabs.Tab component:

Name	Type	Default
className	string	-
disabled	boolean	false

Tabs.Pill

These are props specific to the Tabs.Pill component:

Name	Type	Default
className	string	-
disabled	boolean	false

Tabs.Panels

These are props specific to the Tabs.Panels component:

Name	Type	Default
className	string	-

Tabs.Panel

These are props specific to the Tabs.Panel component:

Name	Type	Default
className	string	-