Conditionally show a tab

[ar5had]

Hi,

I want to show some a tab based on a flag that I have.

Right now, I can do something as shown below -

<Tabs.Root defaultValue="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Account</TabsTrigger>
        {flag && <Tabs.Trigger value="tab2">Password</TabsTrigger>}
      </Tabs.List>
      <Tabs.Content value="tab1">account</Tabs.Content>
      <Tabs.Content value="tab2">password</Tabs.Content>
</Tabs.Root>

This will only show Account tab if flag is false, but the content of tab2 or Password tab will still be added to the virtual DOM. I wonder if there is a way to avoid adding the content to the virtual DOM without conditionally adding Tab.Content based on the value of flag.

[benoitgrelard]

Hey @ar5had,

No there's nothing specific in tabs that would do that.
I'm curious why the solution you brought up (which is the solution I would have brought up) isn't good for you?

[ar5had]

Hey @benoitgrelard, I was under the impression that content from the hidden tab will be mounted. I guess that's not the case, it only mounts when the tab is opened, so yes the above solution seems like a good solution.