forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ExampleChoiceChipCheckbox.js
73 lines (72 loc) · 2.34 KB
/
ExampleChoiceChipCheckbox.js
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import * as React from 'react';
import Box from '@mui/joy/Box';
import Checkbox from '@mui/joy/Checkbox';
import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
import Done from '@mui/icons-material/Done';
export default function ExampleChoiceChipCheckbox() {
const [value, setValue] = React.useState([]);
return (
<Sheet
variant="outlined"
sx={{ width: 360, p: 2, borderRadius: 'sm', bgcolor: 'background.body' }}
>
<Typography id="rank" level="body2" fontWeight="lg" sx={{ mb: 1.5 }}>
Choose amenities
</Typography>
<Box role="group" aria-labelledby="rank">
<List
row
wrap
sx={{
'--List-gap': '8px',
'--List-item-radius': '20px',
'--List-item-minHeight': '32px',
}}
>
{['Elevator', 'Washer/Dryer', 'Fireplace', 'Dogs ok', 'Cats ok'].map(
(item, index) => (
<ListItem key={item}>
{value.includes(item) && (
<Done
fontSize="md"
color="primary"
sx={{ ml: -0.5, mr: 0.5, zIndex: 2, pointerEvents: 'none' }}
/>
)}
<Checkbox
size="sm"
disabled={index === 0}
disableIcon
overlay
label={item}
checked={value.includes(item)}
variant={value.includes(item) ? 'soft' : 'outlined'}
onChange={(event) => {
if (event.target.checked) {
setValue((val) => [...val, item]);
} else {
setValue((val) => val.filter((text) => text !== item));
}
}}
componentsProps={{
action: ({ checked }) => ({
sx: checked
? {
border: '1px solid',
borderColor: 'primary.500',
}
: {},
}),
}}
/>
</ListItem>
),
)}
</List>
</Box>
</Sheet>
);
}