Listbox and Tree View components

[endigo9740]

Hey Zag community - this is Chris from Skeleton. We've been making some excellent progress on integrating Zag with our React and Svelte component libraries. We're nearing parity with our previous release of Skeleton, which provided a number of standard components. However, we wanted to inquire about a few things...

Listbox

First up, we're struggling to find a direct solution for Listbox.

A listbox widget presents a list of options and allows a user to select one or more of them. A listbox that allows a single option to be chosen is a single-select listbox; one that allows multiple options to be selected is a multi-select listbox.

This is valuable for a number of use cases:

• Combine with a Popover to create a quick and simple Menu selection
• Combine with a Popover + Typeahead to create a highly customizable Combobox
• Insert directly into a form as customizable replacement for the <select multiple> element (but allows single select)

The closest we've found is Menu and Combobox, but these seem a bit more rigid. I was curious if this is a feature Zag has planned or would consider in the future. Happy to create a feature request if needed!

Tree View

We've noticed a preview for the Tree View component on Ark, and we saw there was this progress update back in March. But was curious if there there's any further updates or time tables you can share on this. No pressure on this, we know this is a tough one, but would be great to have an estimate we can share with our community!

Roadmap

Finally, I was curious if you guys provide a public-facing roadmap. It would be great to know what sorts of components we might could expect in the future. It could help us avoid building redundant features.

[segunadebayo]

Hey Chris,

Regarding the listbox composition ideas. We designed the machines with composition in mind, rather than having to re-create each scenario as a separate machine.

These are my recommendations:

Popover to create a quick selection menu

Use the menu machine directly since it supports this pattern

Popover + Typeahead to create a highly customizable Combobox

Use the popover machine and render combobox while setting the open and open.controlled state to true

Insert directly into a form as customizable replacement for the <select multiple>

Use the select machine while setting the open and open.controlled state to true.

---

Regarding the roadmap, you can find it here https://ark-ui.canny.io/. We review it from time to time

---

TreeView Updates: We're working to get Chakra UI v3 out of the gate. Afterwhich, the tree view will be completed and shipped everywhere.

[endigo9740]

Awesome thanks Segun, that helps inform our path forward. Much appreciated!