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

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

Change Variants

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

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

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

Disable

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

const items = useMemo<Tabs.RootProps["items"]>(
  () => [
    {
      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.RootProps["items"]>(
  () => [
    {
      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.RootProps["items"]>(
  () => [
    {
      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.RootProps["items"]>(
  () => [
    {
      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 a05d4fd6-86c3-46e0-39f6-b09af196f1db

index: 0

id: a05d4fd6-86c3-46e0-39f6-b09af196f1db

const [index, setIndex] = useState(0)
const [items, setItems] = useState<Required<Tabs.RootProps>["items"]>([
  { 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.RootProps["items"]>(
  () => [
    {
      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.
`align`	`"start"`	`"center" \| "end" \| "start"` The alignment of the tabs.
`defaultIndex`	-	`number` The index of the selected tab.
`fitted`	`false`	`boolean` If `true`, tabs will stretch to width of the tablist.
`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.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tab list.

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

Currently, this section is being updated due to the migration of v2.

Tabs

Usage

Use items

Change Variants

Change Size

Select a Default Item

Change Orientation

Change Alignment

Stretch to Container Width

Disable

Manual Activation

Make Links

Lazy Rendering

Dynamic Tabs

Tab Content a05d4fd6-86c3-46e0-39f6-b09af196f1db

Tab Content f8556e54-612c-4246-067a-07609c96efed

Tab Content 7a45bfc9-b7d5-417a-33c8-f400726ca053

Customize Tabs

Control

Props

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab

Accessibility

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab