Tabs

Tabs is a component for switching between different display areas.

クリリンのことか……クリリンのことかーーーっ！！！！！

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab index={0}>孫悟空</Tabs.Tab>
    <Tabs.Tab index={1}>ベジータ</Tabs.Tab>
    <Tabs.Tab index={2}>フリーザ</Tabs.Tab>
  </Tabs.List>

  <Tabs.Panel index={0}>
    クリリンのことか……クリリンのことかーーーっ！！！！！
  </Tabs.Panel>
  <Tabs.Panel index={1}>へっ！きたねぇ花火だ</Tabs.Panel>
  <Tabs.Panel index={2}>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Tabs.Panel>
</Tabs.Root>

Usage

import { Tabs } from "@yamada-ui/react"

import { Tabs } from "@/components/ui"

import { Tabs } from "@workspaces/ui"

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab />
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel />
  </Tabs.Panels>
</Tabs.Root>

Use items

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

Change Variants

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["line", "outline", "subtle", "plain"]}>
      {(variant) => (
        <Tabs.Root key={variant} variant={variant} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

Change Size

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Tabs.Root key={size} size={size} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

Select a Default Item

へっ！きたねぇ花火だ

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root defaultIndex={1} items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

Change Orientation

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["horizontal", "vertical"]}>
      {(orientation) => (
        <Tabs.Root key={orientation} orientation={orientation} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

Change Alignment

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["start", "center", "end"]}>
      {(align) => (
        <Tabs.Root key={align} align={align} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

Stretch to Container Width

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root fitted items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

Disable

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      disabled: true,
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

Manual Activation

By default, the focused tab is automatically activated. If you want to activate the tab at a specific time (when Enter or Space is pressed), set manual to true.

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root manual items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

Make Links

孫悟空ベジータフリーザ

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      asChild: true,
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: (
        <Text as="a" href="#孫悟空">
          孫悟空
        </Text>
      ),
    },
    {
      asChild: true,
      panel: "へっ！きたねぇ花火だ",
      tab: (
        <Text as="a" href="#ベジータ">
          ベジータ
        </Text>
      ),
    },
    {
      asChild: true,
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: (
        <Text as="a" href="#フリーザ">
          フリーザ
        </Text>
      ),
    },
  ],
  [],
)

return (
  <Tabs.Root items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

Lazy Rendering

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["unmount", "keepMounted"]}>
      {(lazyBehavior) => (
        <Tabs.Root
          key={lazyBehavior}
          lazy
          lazyBehavior={lazyBehavior}
          items={items}
        >
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

Dynamic Tabs

Tab Content 53d49bc4-cf56-4fc9-080f-c45103a5086c

index: 0

id: 53d49bc4-cf56-4fc9-080f-c45103a5086c

const [index, setIndex] = useState(0)
const [items, setItems] = useState<Tabs.Item[]>([
  { id: uuid(), panel: "Tab Content", tab: "Tab" },
  { id: uuid(), panel: "Tab Content", tab: "Tab" },
  { id: uuid(), panel: "Tab Content", tab: "Tab" },
])

const onAddTab = () => {
  const nextItems = [...items, { id: uuid(), panel: "Tab Content", tab: "Tab" }]
  setItems(nextItems)
  setIndex(nextItems.length - 1)
}

const onRemoveTab = (id: string) => {
  const removeIndex = items.findIndex((item) => item.id === id)
  const nextItems = items.filter((item) => item.id !== id)

  setItems(nextItems)

  if (removeIndex < index) {
    setIndex(index - 1)
  } else if (removeIndex === index) {
    setIndex(Math.min(index, nextItems.length - 1))
  }
}

return (
  <Tabs.Root index={index} items={items} manual onChange={setIndex}>
    <Tabs.List>
      {items.map(({ id, tab }, index) => {
        const hasRemove = items.length > 1

        return (
          <Tabs.Tab key={id} index={index} transition="none">
            {tab}
            {hasRemove ? (
              <IconButton
                as="span"
                size="2xs"
                variant="ghost"
                aria-label="Remove Tab"
                icon={<XIcon />}
                role="button"
                onClick={(ev) => {
                  ev.stopPropagation()
                  onRemoveTab(id!)
                }}
              />
            ) : null}
          </Tabs.Tab>
        )
      })}

      <Button
        size="xs"
        variant="ghost"
        role="tab"
        startIcon={<PlusIcon />}
        onClick={onAddTab}
      >
        Add Tab
      </Button>
    </Tabs.List>

    {items.map(({ id, panel }, index) => (
      <Tabs.Panel key={id} index={index}>
        <Heading>
          {panel} {id}
        </Heading>

        <Text>index: {index}</Text>
        <Text>id: {id}</Text>
      </Tabs.Panel>
    ))}
  </Tabs.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Customize Tabs

クリリンのことか……クリリンのことかーーーっ！！！！！

<Tabs.Root>
  <Tabs.List borderWidth={1}>
    <Tabs.Tab index={0}>孫悟空</Tabs.Tab>
    <Tabs.Tab index={1}>ベジータ</Tabs.Tab>
    <Tabs.Tab index={2}>フリーザ</Tabs.Tab>
  </Tabs.List>

  <Tabs.Panel index={0}>
    クリリンのことか……クリリンのことかーーーっ！！！！！
  </Tabs.Panel>
  <Tabs.Panel index={1}>へっ！きたねぇ花火だ</Tabs.Panel>
  <Tabs.Panel index={2}>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Tabs.Panel>
</Tabs.Root>

Control

クリリンのことか……クリリンのことかーーーっ！！！！！

const [index, onChange] = useState<number>(0)

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root index={index} onChange={onChange} items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Tabs.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"line"`	`"line" \| "outline" \| "plain" \| "subtle"` The variant of the component.
`defaultIndex`	-	`number` The index of the selected tab.
`index`	-	`number` The index of the selected tab.
`items`	-	`TabsItem[]` If provided, generate tab and panel components based on tabs.
`lazy`	`false`	`boolean` If `true`, rendering of the content will be deferred until it is selected.
`lazyBehavior`	`"unmount"`	`LazyBehavior` The lazy behavior of content when not active. Only works when `lazy={true}`. - `unmount`: The content is always unmounted. - `keepMounted`: The content is initially unmounted, but stays mounted when selected.
`manual`	`false`	`boolean` If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter. If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.
`onChange`	-	`(index: number) => void` The callback invoked when the index changes.

Tabs.List

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Tabs.Panel

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the tab panel.

Tabs.Tab

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the tab.

Accessibility

Tabs follows the WAI-ARIA - Tabs Pattern for accessibility.

Key	Description	State
`Tab`	Focuses the active tab when focus moves to the tab list. Moves focus to the tab panel if already within the tab list.	-
`ArrowLeft`	Focuses the previous tab that is not disabled. If it's the first tab, focuses the last tab that is not disabled.	`orientation="horizontal"`
`ArrowRight`	Focuses the next tab that is not disabled. If it's the last tab, focuses the first tab that is not disabled.	`orientation="horizontal"`
`ArrowUp`	Focuses the previous tab that is not disabled. If it's the first tab, focuses the last tab that is not disabled.	`orientation="vertical"`
`ArrowDown`	Focuses the next tab that is not disabled. If it's the last tab, focuses the first tab that is not disabled.	`orientation="vertical"`
`Space`, `Enter`	Activates the focused tab.	`manual={true}`
`Home`	Focuses the first tab that is not disabled.	-
`End`	Focuses the last tab that is not disabled.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Tabs.List`	`role="tablist"`	Indicates that this is a tab list.
	`aria-orientation`	Sets to `"horizontal"` or `"vertical"` based on `orientation`. The default is `"horizontal"`.
`Tabs.Tab`	`role="tab"`	Indicates that this is a tab.
	`aria-selected`	Sets to `"true"` when the tab is selected, `"false"` when not selected.
	`aria-controls`	Sets the `id` of the associated `Tabs.Panel`.
`Tabs.Panel`	`role="tabpanel"`	Indicates that this is a tab panel.
	`aria-labelledby`	Sets the `id` of the associated `Tabs.Tab`.

Similar Components

Breadcrumb is a component that helps users understand the hierarchy of a website.

NativeAccordion is a component for a list that displays information in an expandable or collapsible manner using the HTML details element.

Pagination is a component for managing the pagination and navigation of content.

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Steps is a component that displays the progress of a multi-step process.

Menu is a component that displays a common dropdown menu.

Select is a component used for allowing a user to choose values from a list of options.

Uses Components & Hooks

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

useDescendants is a custom hook that manages descendants.

Tabs

Tab Content 53d49bc4-cf56-4fc9-080f-c45103a5086c

Tab Content 194c22de-ff6d-4a3b-29f9-e476fa55ab72

Tab Content 1dd3e0a5-2f57-4a5f-034a-03e941d82b6a

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab