htmlreactjsmaterial-uifieldset

Is there a Box with Title in Material UI

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

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

Solution

  • 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:
    Rendered fieldset code

    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