Tabs

A set of layered sections of content that display one panel at a time.

Installation

bash
npx @smicolon/fasla-ui@latest add tabs

Run init once per project before adding components. See Installation.

Preview

Account

Make changes to your account here.

With Disabled Tab

You have two orders out for delivery.

Props

PropTypeDefaultDescription
valuestring—Active tab, when controlled.
defaultValuestring—Tab active at first.
onValueChange(value) => void—Called when the active tab changes.
TabsTrigger{ value, disabled }—A tab button; its value names its panel.
TabsContent{ value }—The panel shown for its value.
classNamestring—Extra classes for the part.

Usage

Basic tabs

tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

export function AccountTabs() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account content here.</TabsContent>
      <TabsContent value="password">Password content here.</TabsContent>
    </Tabs>
  )
}

Controlled tabs

tsx
"use client"

import { useState } from "react"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

export function ControlledAccountTabs() {
  const [value, setValue] = useState("account")

  return (
    <Tabs value={value} onValueChange={setValue}>
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account content here.</TabsContent>
      <TabsContent value="password">Password content here.</TabsContent>
    </Tabs>
  )
}