CODEWITHSUNDEEP
htmlreactjsmaterial-uifieldset
Jean-François Handfield
Jean-François Handfield

Reputation: 381

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

Upvotes: 12

Views: 9880

Answers (1)

Steve G
Steve G

Reputation: 13357

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

Upvotes: 26

Related Questions