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
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import Box from '@mui/joy/Box';
|
|
import FormLabel from '@mui/joy/FormLabel';
|
|
import Radio from '@mui/joy/Radio';
|
|
import RadioGroup from '@mui/joy/RadioGroup';
|
|
import Sheet from '@mui/joy/Sheet';
|
|
|
|
export default function IconlessRadio() {
|
|
return (
|
|
<Box sx={{ width: 300 }}>
|
|
<FormLabel
|
|
id="storage-label"
|
|
sx={{
|
|
mb: 2,
|
|
fontWeight: 'xl',
|
|
textTransform: 'uppercase',
|
|
fontSize: 'xs',
|
|
letterSpacing: '0.15rem',
|
|
}}
|
|
>
|
|
Storage
|
|
</FormLabel>
|
|
<RadioGroup
|
|
aria-labelledby="storage-label"
|
|
defaultValue="512GB"
|
|
size="lg"
|
|
sx={{ gap: 1.5 }}
|
|
>
|
|
{['512GB', '1TB', '2TB'].map((value) => (
|
|
<Sheet key={value} sx={{ p: 2, borderRadius: 'md', boxShadow: 'sm' }}>
|
|
<Radio
|
|
label={`${value} SSD storage`}
|
|
overlay
|
|
disableIcon
|
|
value={value}
|
|
slotProps={{
|
|
label: ({ checked }) => ({
|
|
sx: {
|
|
fontWeight: 'lg',
|
|
fontSize: 'md',
|
|
color: checked ? 'text.primary' : 'text.secondary',
|
|
},
|
|
}),
|
|
action: ({ checked }) => ({
|
|
sx: (theme) => ({
|
|
...(checked && {
|
|
'--variant-borderWidth': '2px',
|
|
'&&': {
|
|
// && to increase the specificity to win the base :hover styles
|
|
borderColor: theme.vars.palette.primary[500],
|
|
},
|
|
}),
|
|
}),
|
|
}),
|
|
}}
|
|
/>
|
|
</Sheet>
|
|
))}
|
|
</RadioGroup>
|
|
</Box>
|
|
);
|
|
}
|