Tab

Tabs make it easy to explore and switch between different views.

Editor tab content

import { Badge } from "swash/Badge";
import { IoPencil, IoSettings } from "swash/Icon";
import { Tab, TabList, TabPanel, useTabState } from "swash/Tab";

() => {
  const tab = useTabState({
    defaultSelectedId: "editor",
  });

  return (
    <>
      <TabList state={tab} aria-label="Live editor menu">
        <Tab state={tab} id="editor">
          <IoPencil /> Editor
        </Tab>
        <Tab state={tab} id="settings">
          <IoSettings />
          Settings
          <Badge color="danger">1</Badge>
        </Tab>
      </TabList>
      <TabPanel state={tab} tabId="editor" className="p-4">
        Editor tab content
      </TabPanel>
      <TabPanel state={tab} tabId="settings" className="p-4">
        Settings tab content
      </TabPanel>
    </>
  );
};

Nude panel

Add nude property to TabPanel to display an unstyled tab panel.

Editor tab content

import { Tab, TabList, TabPanel, useTabState } from "swash/Tab";

() => {
  const tab = useTabState({
    defaultSelectedId: "editor",
  });

  return (
    <>
      <TabList state={tab} aria-label="Live editor menu">
        <Tab state={tab} id="editor">
          Editor
        </Tab>
        <Tab state={tab} id="settings">
          Settings
        </Tab>
      </TabList>
      <TabPanel state={tab} tabId="editor" className="p-3" transparent>
        Editor tab content
      </TabPanel>
      <TabPanel state={tab} tabId="settings" className="p-3" transparent>
        Settings tab content
      </TabPanel>
    </>
  );
};

Bar

Set variant property to "bar" to display a tabbar. Multiple sizes and themes are available.

size="md" theme="light"

Editor tab content

size="sm" theme="light"

Editor tab content

size="md" theme="dark"

Editor tab content

size="sm" theme="dark"

Editor tab content

Select

Use TabSelectList to showcase a select tab.

Editor tab content

import { Badge } from "swash/Badge";
import { Tab, TabPanel, TabSelectList, useTabState } from "swash/Tab";

export const Example = () => {
  const tab = useTabState({
    defaultSelectedId: "editor",
  });

  return (
    <>
      <TabSelectList state={tab} aria-label="Live editor menu">
        <Tab state={tab} id="editor">
          Editor
        </Tab>
        <Tab state={tab} id="settings">
          Settings
          <Badge color="danger">1</Badge>
        </Tab>
      </TabSelectList>
      <TabPanel state={tab} tabId="editor" className="p-4">
        Editor tab content
      </TabPanel>
      <TabPanel state={tab} tabId="settings" className="p-4">
        Settings tab content
      </TabPanel>
    </>
  );
};

Router

To link your tabs with route, use useRouterTabState hook.

A map of tab ids to route paths must be provided.

import { useRouterTabState } from "swash/RouterTab";

const routes = {
  settings: { path: "", end: true },
  editor: { path: "editor" },
};

() => {
  const tab = useRouterTabState({ routes });
};

Default tab

Specify a default tab using defaultTabId. The corresponding route is automatically navigated to.

import { useRouterTabState } from "swash/RouterTab";

const routes = {
  settings: { path: "", end: true },
  editor: { path: "editor" },
};

() => {
  const tab = useRouterTabState({ routes, defaultTabId: "editor" });
};

Preserve search params

You can preserve search params using preserveSearchParams option.

If true, all search params will be preserved.
If false, no search params will be preserved.
If an array of strings, only the search params with the given names will be preserved.

import { useRouterTabState } from "swash/RouterTab";

const routes = {
  settings: { path: "", end: true },
  editor: { path: "editor" },
};

() => {
  const tab = useRouterTabState({ routes, preserveSearchParams: ["search"] });
};