[select] Add documentation example for extending Select with conditional prop types
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
I'm building a custom component around the Select component and had trouble figuring out how to properly extend its props. My goal was to:
Reuse core props like items, value, and onValueChange directly from SelectRoot
Introduce my own additional props for the wrapper component
Make value and onValueChange adapt to multiple being true or false — i.e., conditionally typed to accept string or string[] accordingly
Here’s the original gist:
👉 https://gist.github.com/desire/dfd2bafa662051d863949dce47bb25d5
After some helpful back and forth (thanks @Aarón García!), we landed on a working solution using conditional types — here's a working sandbox:
👉 https://codesandbox.io/p/devbox/jovial-http-j8j4hg
Suggestion:
It would be really helpful to have an official example in the documentation showing:
How to extend SelectRoot with custom props
How to conditionally type value / onValueChange based on the multiple prop
Possibly even a note in llms.txt so LLMs like ChatGPT can provide better guidance on this pattern
Thanks for considering it!
Contributor guide
Assessment
This issue has not been assessed yet.