Have ideas to improve npm?Join in the discussion! »

    @chakra-ui/tabs
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    @chakra-ui/tabs

    An accessible tabs component.

    The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

    Installation

    yarn add @chakra-ui/tabs
    
    # or
    
    npm i @chakra-ui/tabs

    Import components

    import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"

    Usage

    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
    
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
        <TabPanel>
          <p>three!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>

    Tab variants and color schemes

    Tabs come in 6 different variants to style the tabs: line,enclosed, enclosed-colored, soft-rounded, solid-rounded. Each variant comes it different color schemes.

    <Tabs variant="enclosed" colorScheme="red">
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>

    Manually Activated Tabs

    By default, Tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

    The content of a TabPanel should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

    In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specifc tab, users can activate a tab by pressing Space or Enter.

    <Tabs isManual variant="enclosed">
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>

    Tab sizes

    You can change the size of the tab by passing size prop. We support 3 sizes sm, md, lg

    <Tabs size="md" variant="enclosed">
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>

    Install

    npm i @chakra-ui/tabs

    DownloadsWeekly Downloads

    106,073

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar