diff --git a/docs/data/joy/components/select/SelectMinWidth.js b/docs/data/joy/components/select/SelectMinWidth.js new file mode 100644 index 00000000000000..70f55b92109600 --- /dev/null +++ b/docs/data/joy/components/select/SelectMinWidth.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Select from '@mui/joy/Select'; +import Option from '@mui/joy/Option'; +import Typography from '@mui/joy/Typography'; + +export default function SelectMinWidth() { + return ( + + + + Width is fixed at 100px + + + ); +} diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md index d3e7b7020678ae..d4e4953cb3e01b 100644 --- a/docs/data/joy/components/select/select.md +++ b/docs/data/joy/components/select/select.md @@ -96,6 +96,46 @@ const App = () => ( ); ``` +### Listbox + +#### Maximum height + +To change the listbox's maximum height, use `slotProps` prop to target listbox slot: + +```jsx + +``` + +#### Minimum width + +By default, the listbox's width is equal to Select's button or the maximum content of its children. You can control the minimum width by using `slotProps` prop to target listbox slot. + +{{"demo": "SelectMinWidth.js"}} + +:::success +To control the placement of the listbox, use `placement`: + +```js +