005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
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';
|
|
|
|
export default function IconlessCheckbox() {
|
|
return (
|
|
<Box sx={{ width: 343 }}>
|
|
<Typography id="topping" level="body-sm" sx={{ fontWeight: 'lg', mb: 2 }}>
|
|
Pizza toppings
|
|
</Typography>
|
|
<div role="group" aria-labelledby="topping">
|
|
<List
|
|
orientation="horizontal"
|
|
wrap
|
|
sx={{ '--List-gap': '8px', '--ListItem-radius': '20px' }}
|
|
>
|
|
{[
|
|
'Pepperoni',
|
|
'Cheese',
|
|
'Olives',
|
|
'Tomatoes',
|
|
'Fried Bacon',
|
|
'Spinach',
|
|
].map((item, index) => (
|
|
<ListItem key={item}>
|
|
<Checkbox
|
|
disabled={index === 0}
|
|
overlay
|
|
disableIcon
|
|
variant="soft"
|
|
label={item}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</div>
|
|
</Box>
|
|
);
|
|
}
|