cssasp.netblazormudblazor

How to reduce size of label in Mudblazor checkbox and radio button?


How can I reduce the size of label for Mudcheckbox and Radio button. My code is


<MudCheckBox T="bool" Size=Size.Small Style="font-size:small; font-weight:bold" Label="Is Email Forward Required for 30 Days?" /> 

Also, it is possible to reduce the size of checkbox with custom number rather than size.large or size.small.

I tried custom css class as well but did not worked.


Solution

  • You can target the MudBlazor specific CSS classes or the html tags.

    e.g.

    <style>
    .my-custom-checkbox{
        outline: 1px solid red;
    }
    <!-- For the checkbox label text -->
    .my-custom-checkbox > .mud-input-control-input-container > label > p {
        outline: 1px solid yellow;
        font-size: small;
        font-weight: bold;
        font-family: monospace;
    }
    <!-- For the checkbox icon -->
    .my-custom-checkbox > .mud-input-control-input-container > label > span > svg{
        outline: 1px solid teal;
        font-size: 45px;
    }
    </style>
    
    <MudCheckBox @bind-Value="Basic_CheckBox1" Size="Size.Small" Label="Is Email Forward Required for 30 Days?"></MudCheckBox>
    <MudCheckBox @bind-Value="Basic_CheckBox1" Color="Color.Primary" Size="Size.Medium"  Label="Is Email Forward Required for 30 Days?"></MudCheckBox>
    <MudCheckBox @bind-Value="Basic_CheckBox1" Color="Color.Secondary" Size="Size.Large" Label="Is Email Forward Required for 30 Days?"></MudCheckBox>
    
    <!-- Custom checkbox -->
    <MudCheckBox @bind-Value="Basic_CheckBox1" Class="my-custom-checkbox" Label="Is Email Forward Required for 30 Days?" Color="Color.Tertiary"></MudCheckBox>
    
    @code {
        public bool Basic_CheckBox1 { get; set; } = true;
    }
    

    enter image description here

    👉 Demo Snippet

    I used browser dev tools to find out what the class/tag structure is for the MudCheckBox.

    dev tools