Tabs everywhere

Tabs within Combobox and Select popovers, Tags with multi-selectable Combobox, LinkedIn, new Plus examples and releases.

Hello,

Over the past few months, we've been developing some thrilling new features for Ariakit. The most significant ones are the Tag components and the ability to render Tabs within Combobox and Select popovers.

In a future post, I'll delve into more details about Tag components, which are still in the experimental phase. But for today, let's reintroduce Tabs.

A custom Select widget with Combobox and Tabs inside

We've got a couple of new examples that demonstrate how to use Tabs in both Combobox and Select widgets:

• Combobox with Tabs

• Select with Combobox and Tabs

In short, just render the Tab components inside a Combobox or Select popover, and Ariakit will automatically adjust roles and other ARIA attributes. This ensures the widget is accessible for mouse, touch, keyboard, and assistive technology users:

<ComboboxProvider>
  <Combobox />
  <ComboboxPopover>
    <TabProvider>
      <TabList>
        <Tab />
      </TabList>
      <TabPanel unmountOnHide>
        <ComboboxList>
          <ComboboxItem />
        </ComboboxList>
      </TabPanel>
    </TabProvider>
  </ComboboxPopover>
</ComboboxProvider>

Ensure the TabPanel component is dynamically rendered. You can achieve this either by using the unmountOnHide prop or by rendering a single TabPanel with dynamic content that changes according to the currently selected tab.

We are on LinkedIn

Ariakit is now also on LinkedIn: https://www.linkedin.com/company/ariakit/

We'll share announcements, experiments, and ongoing projects there. If you're active on LinkedIn and this topic sparks your curiosity, we'd value your follow. Interacting with and liking our posts will help us spread the word. ❤️

Built with Ariakit

• RelativeCI (tweeted by Vio)

If you've created something using Ariakit and want it featured in our next newsletter, just share your work on Twitter mentioning @ariakitjs, or reply to this email.

More Ariakit

• New examples:
  Select with Next.js App Router (Plus)
  Animated TabPanel (Plus)
  Animated Disclosure (Plus)
  Select with Combobox and Tabs (Plus)

• Improved examples:

  Animated Combobox
  Animated Dialog
  Animated Select
  Combobox with Tabs (Plus)

• New releases:

  v0.4.1 → v0.4.6