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.
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;
}
👉 Demo Snippet
I used browser dev tools to find out what the class/tag structure is for the MudCheckBox.