Tabs

import { Bell, Lock, User } from "lucide-react"

import { Checkbox, CheckboxLabel } from "@hel/ui/checkbox"

When to use it#

Use tabs to split one screen into a few related views, where people look at one at a time: the sections of an account page, the statuses of a list of orders. They should be peers, with short names, and there should not be many of them.

Tabs change what is shown on the same page. If each choice goes to a different page, use links instead, and if the choice is a setting rather than a view, use a Radio Group.

Import#

Copyimport { Tabs, TabsList, TabsTrigger, TabsContent } from "@hel/ui/tabs"

Anatomy#

Tabs holds the current value. TabsList is the row of tabs. Each TabsTrigger is one tab, and each TabsContent is the panel that belongs to it. A trigger and its panel are matched by the same value.

Copy<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">...</TabsContent>
  <TabsContent value="password">...</TabsContent>
</Tabs>

Left and Right move between the tabs, and Home and End jump to the first and last. Under a right-to-left direction the arrow keys follow the reading direction. A trigger takes a leadingIcon.

Examples#

Controlled value#

Use value and onValueChange when something else on the page needs to know the current tab, such as a filter. Here the tabs are order statuses, with a count in each name.

import * as React from "react"

import { Stack } from "@hel/ui/stack"

Outline and sizes#

The default look is a filled bar with rounded tabs. For a lighter look, make the list variant="ghost" and each trigger variant="outline": no background, with a line under the active tab. size on a trigger is sm or md. A disabled trigger cannot be chosen.

import { Stack } from "@hel/ui/stack"
import { Tabs, TabsList, TabsTrigger } from "@hel/ui/tabs"

Vertical#

Set orientation="vertical" on Tabs to stack the tabs in a column, which suits a settings page with a side list. The arrow keys then move up and down.

import { Flex } from "@hel/ui/flex"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@hel/ui/tabs"
import { Text } from "@hel/ui/text"

Props#

Tabs#

It also takes every prop of the Base UI tabs.

TabsList#

TabsTrigger#

TabsContent#