Incorporate HTML into FormControlLabel with Material UI

In the project I am working on, there is a need to customize a checkbox using FormControlLabel. The requirement is to display the name and code of an item one above another with a reduced font size. Attempts were made to add HTML markup to the label or use Typography, but unfortunately, it did not yield the desired result. Below is the code snippet:

<FormControlLabel
      label={<Typography variant="subtitle2" style={{ color: 'black', fontSize: '10px' }}>{"name_here" + "<br />(\n also not working)" + "code_here"}</Typography>}
      control={<Checkbox size="small"/>}
/>

If anyone has any suggestions on how to resolve this issue, they would be greatly appreciated. Thank you.

javascriptmaterial-ui

Answer №1

If you're looking to achieve this effect, one way is by utilizing the sx property within the FormControlLabel component for MUI V5. Another option would be to use styled components or, for a more universal solution, utilize the MUI theme.

Here's an example implementation using the sx property. You can test it out in this codesandbox playground.

<FormControlLabel
    value="top"
    sx={{
        ".MuiFormControlLabel-label": {
            fontSize: "10px"
        }
    }}
    control={
        <Checkbox
            name="test"
            value="test"
            checked={true}
            size="small"
            inputProps={{ "aria-label": "controlled" }}
        />
    }
    label="Top"
    labelPlacement="top"
/>

Alternatively, if you want to include a Typography component within the label, you can follow a similar approach:

label={
    <Typography sx={{ fontSize: '10px' }}>
      Label Text
    </Typography>
}

You're also free to add any other desired properties to the Typography component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

javascripthtml

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

I am working on an express rest api and need to create a PDF document with a link to download it. I have successfully generated the PDF, but now I want to create a route specifically for returning the PDF link. In addition, I also need other routes that ...

javascriptnode.jsapirestexpress

Complete loading of iframe content on Internet Explorer versions 8 and 9

Having an issue with the full loading of a page in IE8-9. I need to perform certain actions after the content within a div is fully loaded, but it seems that in IE8-9, the page fails to load completely. This is causing problems as my actions are dependent ...

javascriptjqueryinternet-explorer

Running the command "npm start" is resulting in an error message stating: "ENOENT: no such file or directory ... package.json"

After successfully creating a React app using NPX, I encountered an issue when trying to run npm start. The error message that appeared is as follows: $ npm start npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\Administrateur.TE ...

javascriptnode.jsreactjsnpmnpx

Step-by-step guide to implementing onClick functionality within a component

Currently, I am utilizing https://github.com/winhtaikaung/react-tiny-link to showcase posts from various blogs. While I am able to successfully retrieve the previews, I am facing an issue with capturing views count using onClick(). Unfortunately, it appear ...

javascriptnode.jsreactjs

Is it possible to establish a default route in Next.js?

Is it possible to set up default routes in Next.js so that all routes, or a specific list of routes, will automatically navigate to a designated page? My project involves using Next.js to create the marketing website, as well as the sign-up and sign-in pr ...

javascriptreactjsnext.jscreate-react-app

Experiencing unexpected behavior with React Redux in combination with Next.js and NodeJS

I'm in the process of developing an application using Next.js along with redux by utilizing this particular example. Below is a snippet from my store.js: // REDUCERS const authReducer = (state = null, action) => { switch (action.type){ ...

javascriptnode.jsreactjsreduxnext.js

Send PHP data through AJAX and retrieve it on a different PHP page

I need to send a variable through an AJAX URL to another PHP page and retrieve it using: $id=$_GET['id']; Here's an example where the value is passed, for instance $id=6. <a id="pageid" href="ifsc-bank.php?id=<?=$id?>"><im ...

javascriptphpjqueryajax

"Implementing a click event handler on a button within an iframe

On my website, I have embedded an iframe containing external content. Within the code of this iframe is a button identified by the id "XYZ." I want to create an onclick function for this button. Here's what I've attempted: $( "#XYZ" ).click(fun ...

javascriptjqueryiframeonclick

Discover and select an element based on its partial `onclick` attribute value

Can an element be clicked through selenium based on a partial value of an onclick attribute? There are several input elements on the page, and I am interested in selecting one with a specific string. Examples would include: <input name="booksubmit" t ...

javascriptpythonseleniumselenium-webdriverbeautifulsoup

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

javascriptcssreactjssassnext.js

Enhance your Highmap R or JavaScript visualization with a unique custom legend feature

Provided below is my code snippet, output$map <- renderHighchart({ region_map = hcmap("countries/nz/nz-all") highchart(type = "map") %>% hc_title(text = "Average") %>% hc_add_series_map(map = region_map, df = data1, joinBy = " ...

javascriptrhighchartshighmapsr-highcharter

Prevent redundancy by ensuring unique object items are added to an Array

Within my dataset, I have an array of parking objects. Each parking area is structured with 4 floors and each floor has a capacity of 10 spaces for cars. var parking = [ {type:'car',plateNumber:'D555',parkingLevel:L1,parkingNumber:p1 ...

javascriptjqueryangularjs

Tips for incorporating nonce or sha into the connect-src directive in Content Security Policy (CSP)

Can a nonce be used in an API request to make sure that the connect-src in CSP doesn't flag it as a malicious address? It appears that nonce can only be used in script-src or style-src, not in connect-src. So far, I have only been able to list URLs ...

javascriptangularnginx-configsha

es-lint is issuing a warning about the presence of multiple modules within the node_modules directory that have names differing only in their casing

After reviewing all my import statements, I found that everything looks correct. The only unusual import I have is react-bootstrap, which I import as: import { Jumbotron, Button } from 'react-bootstrap'; I'm using the Jumbotron and Button ...

javascriptnode.jsexpressmongooseeslint

Function that activates traffic lights

Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this f ...

javascripthtmlcss

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

Ways to stop your Browser from Caching

Developing a Facebook app has been my recent project. One thing that really bothers me is the random occurrences where changes I make to my CSS style sheet or when adding a new Javascript function do not reflect in the browser. This can be very frustrating ...

javascriptbrowser

Extracting data from a JavaScript React webpage with Python Selenium, targeting an element that disappears shortly after loading

Having trouble with scraping a webpage that features a React element hiding a dropdown after a few seconds. Upon initially arriving at the page, this is what is visible and what I aim to scrape: https://i.sstatic.net/VVY4r.jpg The specific information I ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

When attempting to send a POST request to /api/users/login, the system returned an error stating that "

Is there a way to make a post request to the mLab Database in order to determine if a user account already exists? The server's response states that the User is not defined. Can you please review my code? // @route post api/user/login# router.post(& ...

javascriptnode.jsexpress