mui / mui/base-ui

[select] Add documentation example for extending Select with conditional prop types

Open
#2,474 5 comments 0 reactions 0 assignees View on GitHub
component: select typescript
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.