[Tabs]: how to get active state of trigger?

[da1z]

is it possible to get active state of trigger somehow other then data attribute? trying to add active state with frame motion and need conditional render of active indicator

[fadlytanjung]

Hi, have you tried using props onChangeValue and value? Here example

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs';
import { motion } from 'framer-motion';
import { useState } from 'react';

export default function AnimatedTabs() {
  const [activeTab, setActiveTab] = useState('tab1'); // Initial active tab

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab}>
      <TabsList className="tabs-list">
        <div className="tabs-container">
          <TabsTrigger className="tab-trigger" value="tab1">
            Tab 1
          </TabsTrigger>
          <TabsTrigger className="tab-trigger" value="tab2">
            Tab 2
          </TabsTrigger>
          <TabsTrigger className="tab-trigger" value="tab3">
            Tab 3
          </TabsTrigger>
          {/* Active indicator */}
          <motion.div
            className="active-indicator"
            layout
            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
            style={{
              left: `${100 * (['tab1', 'tab2', 'tab3'].indexOf(activeTab))}%`,
            }}
          />
        </div>
      </TabsList>
      <TabsContent value="tab1">Content for Tab 1</TabsContent>
      <TabsContent value="tab2">Content for Tab 2</TabsContent>
      <TabsContent value="tab3">Content for Tab 3</TabsContent>

      <style jsx>{`
        .tabs-container {
          position: relative;
          display: flex;
        }
        .tab-trigger {
          flex: 1;
          text-align: center;
          padding: 8px 16px;
          cursor: pointer;
        }
        .active-indicator {
          position: absolute;
          bottom: 0;
          height: 4px;
          width: 100%;
          background-color: blue;
        }
      `}</style>
    </Tabs>
  );
}

Or do you mean something else by your question?

[da1z]

I want to keep my tabs in uncontrolled state