Tabs

FormLabel can be used for adding label for your input fields. Twigs also comes with a FormInput component, which wraps Label and Input in a single component.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@sparrowengg/twigs-react";

Usage

Result

Loading...

Live EditorOpen in playground

<Tabs defaultValue="tab1">
  <TabsList aria-label="tabs example">
    <TabsTrigger value="tab1"> One </TabsTrigger>
    <TabsTrigger value="tab2"> Two </TabsTrigger>
    <TabsTrigger value="tab3"> Three </TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Tab 1</TabsContent>
  <TabsContent value="tab2">Tab 2</TabsContent>
  <TabsContent value="tab3">Tab 3</TabsContent>
</Tabs>

Props

Tabs

Property	Description	Type	Default
defaultValue	Uncontrolled default active tab
value	controlled value
onValueChange	Event handler called when the value changes

TabsTrigger

Property	Description	Type	Default
disabled	status of the tab
value	identifier for the tab