How to make Tabs interactive?

How do I make Tabs interactive. I’m using Chakra UI and have a index prop:


If this is a “controlled” prop, then setting it in the studio will “lock” the tab to index 2 (in generated code, index is always set to 2).

When you register the tabs component, you can use the editOnly attribute for the index prop:

registerComponent(Tabs, {
  props: {
    index: {
      type: "number",
      editOnly: true

This means that the prop value you set in the studio will only be used in the studio, but will be ignored when we generate code.

See for more details

And how do I make this interactive in Preview. Do I need to convert to link?

Or should I link to Page variants for each Tab?

hmm if you’re using a Tabs code component, is it not already interactive?

OK, seeing your comment. I tried again with a fresh instance of the Tab components and it works.
Too easy. Not sure why the last Tab stopped working will keep an eye on this.

OK I see.
If I set index, it stops working. Even if I add your code. So I’ll just leave index unset for now.

Can you set…

index: {
  editOnly: true,
  uncontrolledProp: "defaultIndex"

this means for codegen, it will pass what you specify for index in the studio into the defaultIndex prop instead, which will leave the tabs component in uncontrolled mode, so you can interact with it in preview

But I’m using Nextjs

ah I just meant “when generating code using Tabs”, it will use defaultIndex instead of index