Accessing Listbox value with slot property about svelte-headlessui HOT 2 CLOSED

Hey! Sorry you're having trouble with the documentation, I know it's not in a good state right now. Writing independent, Svelte-specific documentation is my next priority for this project, but in the meantime I'm happy to try to help with questions like this.

The way to convert the docs is that the props are the same in both libraries & the "render props" in React become slot props in Svelte; the let:value syntax in Svelte is for accessing a slot prop. For Listbox, value is a normal prop, not a slot prop, so that's why your example doesn't work.

The way this component is designed (as well as most of the other components in the library) is that it doesn't manage its own state directly. You pass it a value prop that says which value is selected, and the component fires a change event when the user selects a new value, which you use to update the value prop. For example, something like:

<script>
  let value;
</script>

<Listbox {value} on:change={(e) => value = e.detail}>
  <ListboxButton>{value ?? ""}</ListboxButton>
  <ListboxOptions>
    <ListboxOption value="Option A">Option A</ListboxOption>
    <ListboxOption value="Option B">Option B</ListboxOption>
    <ListboxOption value="Option C">Option C</ListboxOption>
  </ListboxOptions>
</Listbox>

It might seem a little unintuitive for it to work this way--why doesn't the Listbox just keep track of which item is selected instead of making you always tell it?--but it's more flexible, since it gives you total control over which item is selected in case you want to set it programmatically.

Hope that makes sense, let me know if you have more questions!

from svelte-headlessui.

@rgossiaux Thanks a lot for the detailed reply! I now have a better understanding of how to "read" the React docs and use your svelte components!

from svelte-headlessui.