Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

Tabs

Tabs is a component for switching between different display areas.

Source@yamada-ui/tabs

Import

import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@yamada-ui/react"
Copied!
  • Tabs: A wrapper component that controls the child elements (TabList, TabPanels).
  • TabList: A wrapper component that controls the child elements (Tab).
  • Tab: A button component that functions as a label for the panel and displays that panel.
  • TabPanels: A wrapper component that controls the child elements (TabPanel).
  • TabPanel: A component that displays content associated with a label.

Usage

Tab and TabPanel must always be paired. Internally, they are linked by the same index.

Editable example

<Tabs>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

Change Variants

Editable example

<VStack>
  <Tabs variant="line">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="sticky">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="sticky-subtle">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="sticky-solid">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="rounded">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="rounded-subtle">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="rounded-solid">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="unstyled">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

Change Size

Editable example

<VStack>
  <Tabs size="sm">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs size="md">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs size="lg">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

Change Color Scheme

Editable example

<VStack>
  <Tabs variant="rounded-solid" colorScheme="red">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs variant="sticky-solid" colorScheme="purple">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

Select a Default Item

To select a default item, set the index of the item to defaultIndex.

Editable example

<Tabs defaultIndex={1}>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

Change Alignment

By setting align to start, center, or end, you can change the alignment of the tabs.

Editable example

<VStack>
  <Tabs align="start">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs align="center">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs align="end">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

Change Orientation

By setting orientation to horizontal or vertical, you can change the orientation of the tabs.

Editable example

<VStack>
  <Tabs orientation="horizontal">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

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

  <Tabs orientation="vertical">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

Stretch to Container Width

By setting fitted to true, you can stretch the tabs evenly to the width of the container.

Editable example

<Tabs variant="sticky" fitted>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

Disable

If you want to disable a specific tab, set disabled.

Editable example

<Tabs>
  <Tab>孫悟空</Tab>
  <Tab disabled>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

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.

Editable example

<Tabs manual>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

Lazy Rendering

By default, all panels are rendered in the DOM regardless of whether they are active. This means that even hidden panels are rendered but are invisible due to styling.

If you want to delay the rendering of each panel until the tab becomes active, set lazy to true.

Editable example

<Tabs lazy lazyBehavior="unmount">
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

Use TabList

If TabList does not exist in children, Tab automatically wraps the Tab in children with TabList. If you want to customize TabList, set TabList in children.

Editable example

<Tabs>
  <TabList borderWidth={1}>
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>
  </TabList>

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

Use TabPanels

If TabPanels does not exist in children, Tab automatically wraps the TabPanel in children with TabPanels. If you want to customize TabPanels, set TabPanels in children.

Editable example

<Tabs variant="sticky">
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

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

Control

Editable example

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

return (
  <Tabs index={index} onChange={onChange}>
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
)
Copied!

Edit this page on GitHub

PreviousAccordionNextTree