Is there a Box with Title in Material UI

Question

Is there a way to create a Box or a Paper with a title on top like this screenshot :

I'm talking about the top lefty title portion. I tried using a Box or a Paper component but it doesn't seem like the option is there.

Thank you for the help

Answer 1

You can change a Box's underlying element to a fieldset and add a legend element as a child of the MUI Box, but you'll probably want to apply a little styling to it as MUI does not offer styled versions of fieldset/legend.

import React from "react";
import Box from "@mui/material/Box";

const FieldsetExample = () => {
  return (
    <Box component="fieldset">
      <legend>Jean-François H</legend>
      Box content goes here.
    </Box>
  );
}

Renders:

Working CodeSandbox:
https://codesandbox.io/s/nostalgic-booth-09dwu7?file=/demo.js

Documentation References:
MUI Docs - Box API props (see component)
MDN Docs - <fieldset>: The Field Set element