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

My API is feeding data to the Material UI CardMedia image

Has anyone encountered a similar error while using the CardMedia API provided by Material-UI? I am currently utilizing the Card & CardMedia components from material-ui to display data fetched from an api. However, I am facing difficulty in displaying ...

javascriptreactjsmaterial-ui

Troubleshooting Problems with POST Requests in ExpressJS

Currently, I am working on developing a feature in NodeJS that allows users to upload files. However, I am encountering difficulties while attempting to make a simple POST request. In my index.ejs file, I have written code that generates a form and initia ...

javascriptnode.jsexpress

EventBus emitting multiple times until the page is refreshed

Trying to make use of the EventBus in Vue.js to transfer data from one method to another. In my setup, I've got two methods named one() and two(). Here's how I'm implementing the EventBus: one() { EventBus.$emit("this:that", data); } And ...

javascriptvue.js

Editing HTML using the retrieved jQuery html() content

I need to modify some HTML that is stored in a variable. For example: var testhtml = $('.agenda-rename').html(); console.log($('input',testhtml).attr('name')); I also tried the following: console.log($(testhtml).find(' ...

javascriptjqueryhtmldomstring

Let's update the VUE app's development server to point to my-testing-web-address.com instead of the default localhost:

I am working on a VUE application and I am trying to run it on an external link instead of localhost. I attempted to configure a vue.config.js devServer: { host: 'http://my-testing-web-address.com', port: 8080, ... } and adjusted t ...

javascriptvue.jslocalhostwebpack-dev-serverdevserver

Adding a CSS class to an HTML element using JQuery

I have a collection of tabs, and I want to dynamically add an <hr> element with the class "break-sec" when a certain class is active. This element should be placed within a <span> element with the class "vc_tta-title-text" after the text. Here ...

javascriptjqueryhtmlcssvisual-composer

Sorting JSON data using JQuery Ajax

I've encountered an issue with sorting JSON data. Here is the JSON data I'm working with: [ { nom: "TERRES LATINES", numero: "0473343687", image: "http://s604712774.onlinehome.fr/bonapp/api/wp-content/uploads/2016/12 ...

javascriptjqueryjsonajax

Encountering a Vercel deployment failure due to a TypeError: The 'split' property cannot be read from undefined within several objects

I'm having trouble deploying my web application for the first time and encountering this error on Vercel: TypeError: Cannot read property 'split' of undefined at Object.3qS3 (/vercel/path0/.next/serverless/pages/[collection]/[templateId].j ...

javascriptreactjsnext.jsvercel

Is it possible to display a value conditionally based on a condition from a Json object?

I'm looking to add a new feature that displays all the movies featuring Sean Connery in a button, but I'm stuck on how to implement it. Prettier 2.7.1 --parser babel Input: import React, { useState } from "react"; import styled ...

javascriptreactjsjsonbuttonaxios

Gatsby is throwing an error because the location props are not defined

I am attempting to utilize location props in my Gatsby page. In pages/index.js, I am passing props within my Link: <Link state={{eventID: event.id}} to={`/date/${event.name}`}> </Link> In pages/date/[dateId]/index.js: const DateWithId = ( ...

javascriptreactjsgatsby

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

javascriptcssgoogle-chromegoogle-chrome-extension

Dealing with Unhandled Promise Rejections in Express.js

I'm providing all the necessary details for this question, however I am confused as to why my callback function is returning an Unhandled Promise Rejection even though I deliberately want to catch the error: (node:3144) UnhandledPromiseRejectionWarni ...

javascriptexpress

Having trouble making an ajax request using Cordova?

I recently started a new project and included some code for making a request. Below is how my JavaScript file looks: (function () { "use strict"; document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false ); function onDeviceR ...

javascriptjqueryajaxcordova

Steps to creating a custom text editor using React for generating blog content and storing it in a MongoDB database

I have a challenge of building a rich text editor for my web app, specifically for creating blog posts that will be saved in the database for user viewing. Initially, I planned to use a form with input fields where the title and content of the blog post w ...

javascriptnode.jsreactjsmongodbexpress

What are the steps for configuring clusters in an expressjs 4.x application?

I currently have an expressjs generated app that is configured with socket io and I want to incorporate nodejs clusters into it. However, the challenge lies in the fact that in Express 4.x, the server listening configuration now resides in the bin/www file ...

javascriptnode.jsexpressnode-cluster

Leveraging the power of Google Closure Templates alongside the versatility of

We are embarking on developing an application using JavaScript and HTML5 that will utilize a rest API to access server resources, leveraging the power and convenience of jQuery which our development team is already proficient in. Our goal is to make this a ...

javascriptjquerywidgetgoogle-closuregoogle-closure-library

Retrieve Next Element with XPath

I recently started working with XPATH and have a few questions about its capabilities and whether it can achieve what I need. The XML Document structure I am dealing with is as follows: <root> <top id="1"> <item id="1"> < ...

javascriptxmlnode.jsxpath

Leverage Angular's constant feature in scenarios that extend beyond the

Even though it may not be recommended, I find it fascinating to use Angular services outside of the angular framework. One example is having .constant('APIprefix','/api') I am curious about how to access the value of APIprefix outside ...

javascriptangularjs

Encountering a 500 internal server error while trying to submit a form via AJAX and

I'm a beginner in PHP and I'm facing issues with sending test emails from my local host. My form consists of 3 fields, and I want the user to be able to submit the form and see a success message without the page refreshing. Although I have set u ...

javascriptphpjquery

Utilizing HTML and JavaScript to Download Images from a Web Browser

I'm interested in adding a feature that allows users to save an image (svg) from a webpage onto their local machine, but I'm not sure how to go about doing this. I know it can be done with canvas, but I'm unsure about regular images. Here i ...

javascripthtmlimage