How to add a label to a border in mui?

Question

I would like to have a list wrapped in a border which looks and behaves the same as a textfield border: Example textfield and list which should have both same border.

In the image, the border around the list looks similar than the one around the textfield but most notably, the label is missing. How can I add the label and how would I set up the focus listeners to get the same hover and selection behaviour?

The typescript code for the list:

<List dense sx={{ borderRadius: 1, border: 1, borderColor: 'grey.600'}}>
   <ListItem secondaryAction={<IconButton edge="end" aria-label="delete"><DeleteIcon /></IconButton>}>
      <ListItemText primary="primary" secondary="group id"/>
   </ListItem>
</List>

I am also open for alternative approaches. Thanks for the help.

Answer 1

I now managed to hack a solution which looks the same. I do still hope though that there is a clean way to do this: result.

<FormLabel style={{marginLeft: "0.71em", marginTop: "-0.71em", paddingLeft: "0.44em", zIndex: 2, width: "4.2em", backgroundColor: "#383838", position: "absolute", fontSize: "0.75em"}}>Damage</FormLabel>
<List dense sx={{ borderRadius: 1, border: 1, borderColor: 'grey.600', "&:hover": { borderColor: 'grey.200' }}}>
   <ListItem secondaryAction={<IconButton edge="end" aria-label="delete"><DeleteIcon /></IconButton>}>
      <ListItemText primary="primary" secondary="group id"/>
   </ListItem>
</List>