forked from mui/material-ui
/
SelectFieldDemo.tsx
35 lines (34 loc) · 1.13 KB
/
SelectFieldDemo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import * as React from 'react';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import FormHelperText from '@mui/joy/FormHelperText';
import Select from '@mui/joy/Select';
import Option from '@mui/joy/Option';
export default function SelectFieldDemo() {
return (
<FormControl sx={{ width: 240 }}>
<FormLabel id="select-field-demo-label" htmlFor="select-field-demo-button">
Favorite pet
</FormLabel>
<Select
defaultValue="dog"
slotProps={{
button: {
id: 'select-field-demo-button',
// TODO: Material UI set aria-labelledby correctly & automatically
// but MUI Base and Joy UI don't yet.
'aria-labelledby': 'select-field-demo-label select-field-demo-button',
},
}}
>
<Option value="dog">Dog</Option>
<Option value="cat">Cat</Option>
<Option value="fish">Fish</Option>
<Option value="bird">Bird</Option>
</Select>
<FormHelperText id="select-field-demo-helper">
This is a helper text.
</FormHelperText>
</FormControl>
);
}