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
30 lines
814 B
JavaScript
30 lines
814 B
JavaScript
import Box from '@mui/joy/Box';
|
|
import Checkbox, { checkboxClasses } from '@mui/joy/Checkbox';
|
|
import Sheet from '@mui/joy/Sheet';
|
|
|
|
export default function OverlayCheckbox() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 2,
|
|
width: 300,
|
|
'& > div': { p: 2, borderRadius: 'md', display: 'flex' },
|
|
}}
|
|
>
|
|
<Sheet variant="outlined">
|
|
<Checkbox overlay label="Focus on me" />
|
|
</Sheet>
|
|
<Sheet variant="outlined">
|
|
<Checkbox
|
|
label="My parent receives focus"
|
|
overlay
|
|
// Force the outline to appear in the demo. Usually, you don't need this in your project.
|
|
slotProps={{ action: { className: checkboxClasses.focusVisible } }}
|
|
/>
|
|
</Sheet>
|
|
</Box>
|
|
);
|
|
}
|