Let us programmatically set the current Tab (or better yet expose the context)

[mattiaz9]

Right now switching between tabs is only possibile with mouse and keyboard, but there are case where it would be useful to manually set the current tab in the code (for instance, a 'Next' button that should select the following tab).

I'm not sure what could be the best way to achieve it, but for what I could've seen in the code the components use the react context, and maybe the package could expose a Tabs.TabsContext that we can use for our purposes.

[diegosanw]

This would be great!

My use case is this one:
I want to change the TabList for a dropdown menu on small screens. I would like to keep using the same TabPanels and switch the current TabPanel with the dropdown change event.

The only solution I found so far is to replicate the contents of the TabPanels and not use headlessui for small screens.

[yannsheriff]

It would be awesome, I have the same use case here.

[dospunk]

What we've done for this is to hide the on small screens but not the , and have a that programmatically clicks the corresponding when its value is changed. It feels a little hacky to write but it works like a charm

[dospunk]

It is technically possible, but kind of hacky. In Vue terms, you can do it by keeping an array of refs to each of the Tab buttons, then you can programmatically click on the tabs through their refs.

[LoganDark]

It surprises me that the Tabs component is not controlled. I wish they had chosen to use index rather than defaultIndex

[devinfd]

I have a current need for this feature for the same reason @ds-perfit describes

[hjbdev]

I don't really see much reason why the context should not be exposed for all components. This library is one of the best UI component libraries out there, but the lack of programmatic control can be frustrating at times.

[jamesray]

Yeah the ability to manipulate the context without simulating a click would be great for so many use-cases.

[Regisnut]

same issue, I 'd like to put link in my footer and onclick to get to the tabs required and I'm stuck with only defaultIndex !

[Regisnut]

pity, with chakra ui, you have something like this :
<Tabs index={tabIndex}
...

[JacobReynolds]

I'd be curious to know if there are any semantic or accessibility reasons for not having this. If not, I'd be happy to try and open a pull request with the functionality. I've got a good example of it working for react here https://github.com/NetSPI/headlessui, but it could probably be more robust.

[OmkarK45]

One good use case is creating step-forms ! One can have next/previous buttons to programmatically change the current tab

[seanparkonline]

In combo with Formik it's magic for multi-step forms!
🪄

[husleuujii]

is there any repo?

[thiagonzalez]

I'm in the same situation here. I have links in tab 1, which needs to change the tab on click to tab 2 or 3:

I can see the state changing, but the defaultIndex doesn't reflect my state. I'm out of ideas here :(
The only way to fix it here is to refresh the page after adding a queryString to the URL.

[yordis]

Same deal for us, #902

We had to use the key just so we trigger a re-rendering 😭

[seanparkonline]

Thanks for this. Works.
Hope Tailwind add support for the feature soon.

[dwome]

Great and clean way!

[Desalubrious]

Thank you! This saved me hours of headache.

[DanielBailey-web]

@Desalubrious there is a built in way:
#742 (comment)

The way mentioned above completely re-renders the component due to the change in the key which generally is not what you are looking for.

[seanparkonline]

As per @thiagonzalez and @marcioj, tracking the selectedTabIndex in state and then passing it to <Tab.Group> as a key prop to trigger a re-render works.

One extra note is that you should also use the onChange prop to set the index of your state so that if the user navigates by keyboard or clicking on the tab the state is updated also.
eg:

<Tab.Group key={selectedTabIndex} defaultIndex={selectedTabIndex} onChange={index => setSelectedTabIndex(index)}>
    ...

Hope Tailwind adds native support for this soon.

[DanielBailey-web]

This was added, you can do this:

<Tab.Group
  onChange={(i: any) => setTabIndex(i)}
  selectedIndex={tabIndex}
>
  {children}
</Tab.Group>

[DanielBailey-web]

@rjlg its from a useState hook. Sorry I didn't make that clear.
const [tabIndex, setTabIndex] = useState(0)

You could of course use any type of state and way to set it (such as class component state, or context [useContext, redux or other] to accomplish this)

[dospunk]

On Vue selectedIndex is a slot prop, so this method will only work on React it seems

[DanielBailey-web]

@dospunk Look at my edit for react, there is a change Vue was already using tabIndex as the prop. (Idk tho)

[RobinMalfait]

@DanielBailey-web this is incorrect, we did have a defaultIndex prop, this has not been changed it still exists. The prop to control data is selectedIndex for both React and Vue. tabIndex also exists, but this controls the native tabindex on focusable elements.

See: #742 (comment) for more info.

[DanielBailey-web]

@RobinMalfait Oh shoot you right my B. Edited it back. But I get a type error when using selectedIndex now... (but it still works)

[RobinMalfait]

Hey all!

The Tabs component can be a controlled component now, this means that this is possible out of the box using the selectedIndex prop.

More info can be found here:

• React: https://headlessui.dev/react/tabs#controlling-the-active-tab
• Vue: https://headlessui.dev/vue/tabs#controlling-the-active-tab

[leon-up9]

how to reset the selected tab to be nothing?(select none of the tabs)

[maupeon]

This is happening to me when trying to control selectedIndex

[DanielBailey-web]

Post your code 👀

[leon-up9]

how to reset the selected tab to be nothing?(select none of the tabs)

[pranto-rayple]

Just pass nothing in the useState()