Basics

Tabs

Switch between related views within the same context.

Examples

Switch between related views within the same context.

Profile is ready

The latest participant data is included in this view.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Tabs

<Tabs defaultValue="profile">
          <TabsList>
            <TabsTrigger value="profile">Profile</TabsTrigger>
            <TabsTrigger value="comparison">Comparison</TabsTrigger>
            <TabsTrigger value="data">Data</TabsTrigger>
          </TabsList>
          <TabsContent value="profile" className="pt-4">
            <Alert>
              <AlertTitle>Profile is ready</AlertTitle>
              <AlertDescription>
                The latest participant data is included in this view.
              </AlertDescription>
            </Alert>
          </TabsContent>
          <TabsContent value="comparison" className="pt-4 text-sm text-muted-foreground">
            Choose participants to compare their profiles.
          </TabsContent>
          <TabsContent value="data" className="pt-4 text-sm text-muted-foreground">
            Exported data and source details appear here.
          </TabsContent>
        </Tabs>

value / onValueChange: Controlled active tab; defaultValue provides uncontrolled initial selection.
orientation: horizontal or vertical. Keep the visual layout consistent with keyboard navigation.