Building Materials Marketplace

Checks

Default checkbox

Checked checkbox

<MudGrid>
    <MudItem xs="12" md="6" lg="12">

        <MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Primary" Size="Size.Small" Label=" Default checkbox" class="mb-2"></MudCheckBox>

        <MudCheckBox @bind-Value="Basic_CheckBox4" Color="Color.Primary" Size="Size.Small" Label=" Checked checkbox"></MudCheckBox>

    </MudItem>
</MudGrid>

Disabled

Disabled Default checkbox

Disabled Checked checkbox

<MudGrid>
    <MudItem xs="12" md="6" lg="12">

        <MudCheckBox @bind-Value="Basic_CheckBox3D" Color="Color.Primary" Size="Size.Small" Disabled="true" Label="Disabled Default checkbox" class="mb-2"></MudCheckBox>

        <MudCheckBox @bind-Value="Basic_CheckBox4D" Color="Color.Primary" Size="Size.Small" Disabled="true" Label="Disabled Checked checkbox"></MudCheckBox>

    </MudItem>
</MudGrid>

Radios

Default radio

Default checked radio

<MudGrid>
    <MudItem xs="12" md="6" lg="12">

        <MudRadioGroup T="int" @bind-Value="selectedValue1" class="mud-column-radio-group">
            <MudRadio Value="1" Color="Color.Primary" Size="Size.Small" UncheckedColor="Color.Primary">Default radio</MudRadio>
            <MudRadio Value="2" Color="Color.Primary" Size="Size.Small" UncheckedColor="Color.Primary">Default checked radio</MudRadio>
        </MudRadioGroup>

    </MudItem>
</MudGrid>

Disabled

Disabled Default radio

Disabled Disabled radio

<MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <MudRadioGroup T="int" @bind-Value="selectedValue2" class="mud-column-radio-group">
            <MudRadio Value="1" Color="Color.Primary" Size="Size.Small"  UncheckedColor="Color.Primary" Disabled="true">Disabled Default radio</MudRadio>
            <MudRadio Value="2" Color="Color.Primary" Size="Size.Small" UncheckedColor="Color.Primary" Disabled="true">Disabled Disabled radio</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

Default (stacked)

Default checkbox

Disabled checkbox

Default radio

Disabled radio

<MudGrid>
    <MudItem xs="12" md="12" lg="12">

        <MudCheckBox @bind-Value="Basic_CheckBox5" Size="Size.Small" Color="Color.Primary" Label="Default checkbox" class="mb-2"></MudCheckBox>

        <MudCheckBox @bind-Value="Basic_CheckBox6" Size="Size.Small" Color="Color.Primary" Disabled="true" Label="Disabled checkbox" class="mb-2"></MudCheckBox>

        <MudRadioGroup T="int" @bind-Value="selectedValue3" class="mud-column-radio-group">
            <MudRadio Value="1" Size="Size.Small" Color="Color.Primary">Default radio</MudRadio>
            <MudRadio Value="2" Size="Size.Small" Color="Color.Primary" Disabled="true">Disabled radio</MudRadio>
        </MudRadioGroup>
        
    </MudItem>
    
</MudGrid>

Switches

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

<MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <MudSwitch @bind-Value="Basic_Switch1" Color="Color.Primary" Label="Default switch checkbox input" class="toggle-switch" />
        <MudSwitch @bind-Value="Basic_Switch2" Color="Color.Primary" Label="Checked switch checkbox input" class="toggle-switch" />
        <MudSwitch @bind-Value="Basic_Switch1D" Disabled="true" Color="Color.Primary" Label="Disabled switch checkbox input" class="toggle-switch" />
        <MudSwitch @bind-Value="Basic_Switch2D" Disabled="true" Color="Color.Primary" Label="Disabled checked switch checkbox input" class="toggle-switch" />
    </MudItem>
    
</MudGrid>

Checkbox Sizes

Default

Medium

Large

<MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <div Class="d-flex flex-row flex-grow-1 gap-4 align-center justify-space-between flex-wrap">
            <MudCheckBox @bind-Value="Basic_CheckBox7" Size="Size.Small" Color="Color.Primary">Default</MudCheckBox>
            <MudCheckBox @bind-Value="Basic_CheckBox8" Size="Size.Medium" Color="Color.Primary">Medium</MudCheckBox>
            <MudCheckBox @bind-Value="Basic_CheckBox9" Size="Size.Large" Color="Color.Primary">Large</MudCheckBox>
        </div>
    </MudItem>
</MudGrid>

Radio Sizes

Small

Medium

Large

<MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <div Class="d-flex flex-row flex-grow-1 gap-4 align-center justify-space-between radio-group-flex flex-wrap">
            <MudRadioGroup @bind-Value="selectedValue4">
                <MudRadio Value="1" Color="Color.Primary" Size="Size.Small">Small</MudRadio>
                <MudRadio Value="2" Color="Color.Primary" Size="Size.Medium">Medium</MudRadio>
                <MudRadio Value="3" Color="Color.Primary" Size="Size.Large">Large</MudRadio>
            </MudRadioGroup>
        </div>

    </MudItem>
    
</MudGrid>

Switch Sizes

Default

Medium

Large

 <MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <div Class="d-flex flex-row flex-grow-1 gap-4 align-center justify-space-between flex-wrap">

            <MudSwitch @bind-Value="Basic_Switch5" Color="Color.Primary" Size="Size.Small" Label="Default"/>
            <MudSwitch @bind-Value="Basic_Switch6" Color="Color.Primary" Size="Size.Medium" Label="Medium"/>
            <MudSwitch @bind-Value="Basic_Switch7" Color="Color.Primary" Size="Size.Large" Label="Large"/>

        </div>

    </MudItem>
    
</MudGrid>

Inline

1

2

3(Disable)

1

2

3(Disable)

  <MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <div Class="d-flex flex-row flex-grow-1 gap-4 flex-wrap">
            <MudCheckBox @bind-Value="Basic_CheckBox10" Size="Size.Small" Color="Color.Primary" UncheckedColor="Color.Error" Label="1"></MudCheckBox>
            <MudCheckBox @bind-Value="Basic_CheckBox11" Size="Size.Small" Color="Color.Primary" UncheckedColor="Color.Default" Label="2"></MudCheckBox>
            <MudCheckBox @bind-Value="Basic_CheckBox12" Size="Size.Small" Color="Color.Primary" UncheckedColor="Color.Default" Disabled="true" Label="3(Disable)"></MudCheckBox>
            
            <MudRadioGroup T="int" @bind-Value="selectedValue5" class="ms-4">
                <MudRadio Value="1" Color="Color.Primary" Size="Size.Small" UncheckedColor="Color.Primary">1</MudRadio>
                <MudRadio Value="2" Color="Color.Primary" Size="Size.Small" UncheckedColor="Color.Primary">2</MudRadio>
                <MudRadio Value="3" Color="Color.Primary" Size="Size.Small" Disabled="true" UncheckedColor="Color.Primary">3(Disable)</MudRadio>
            </MudRadioGroup>

        </div>

    </MudItem>
    
</MudGrid>

Without labels

  <MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <div Class="d-flex flex-row flex-grow-1 gap-4">
            <MudCheckBox @bind-Value="Basic_CheckBox13" Size="Size.Small" Color="Color.Primary" UncheckedColor="Color.Primary"></MudCheckBox>
            
            <MudRadioGroup T="int" @bind-Value="selectedValue6">
                <MudRadio Value="1" Color="Color.Primary" Size="Size.Small" UncheckedColor="Color.Primary"></MudRadio>
            </MudRadioGroup>

        </div>

    </MudItem>
    
</MudGrid>

Radio toggle buttons

  <MudRadioGroup T="int" @bind-Value="selectedValue8" class="radio-toggle-buttons">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave">Checked
        <MudRadio Value="1" Color="Color.Primary" Class="btn-check" UncheckedColor="Color.Primary"></MudRadio>
    </MudButton>

    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave">Radio
        <MudRadio Value="2" Color="Color.Primary" Class="btn-check" UncheckedColor="Color.Primary"></MudRadio>
    </MudButton>

    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave" Disabled="true">Disabled
        <MudRadio Value="3" Color="Color.Primary" Class="btn-check" Disabled="true" UncheckedColor="Color.Primary"></MudRadio>
    </MudButton>

    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave">Radio
        <MudRadio Value="4" Color="Color.Primary" Class="btn-check" UncheckedColor="Color.Primary"></MudRadio>
    </MudButton>
</MudRadioGroup>

Checkbox toggle buttons

  <MudRadioGroup T="string" @bind-Value="_value1"  class="radio-toggle-buttons">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave">Single toggle
        <MudCheckBox @bind-Value="Basic_CheckBox25" Color="Color.Primary" Class="btn-check"></MudCheckBox>
    </MudButton>

    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave">Radio
        <MudCheckBox @bind-Value="Basic_CheckBox251" Color="Color.Primary" Class="btn-check"></MudCheckBox>
    </MudButton>

    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave" Disabled="true">Disabled
        <MudCheckBox @bind-Value="Basic_CheckBox252" Color="Color.Primary" Disabled="true" Class="btn-check"></MudCheckBox>
    </MudButton>
</MudRadioGroup>

Colored Checkboxes

Primary

Secondary

Warning

Info

Success

Error

Dark

 <MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <MudCheckBox @bind-Value="Basic_CheckBox16" class="mb-2" Size="Size.Small" Color="Color.Primary" UncheckedColor="Color.Primary">Primary</MudCheckBox>
        <MudCheckBox @bind-Value="Basic_CheckBox17" class="mb-2" Size="Size.Small" Color="Color.Secondary" UncheckedColor="Color.Secondary">Secondary</MudCheckBox>
        <MudCheckBox @bind-Value="Basic_CheckBox29" class="mb-2" Size="Size.Small" Color="Color.Warning" UncheckedColor="Color.Warning">Warning</MudCheckBox>
        <MudCheckBox @bind-Value="Basic_CheckBox30" class="mb-2" Size="Size.Small" Color="Color.Info" UncheckedColor="Color.Info">Info</MudCheckBox>
        <MudCheckBox @bind-Value="Basic_CheckBox31" class="mb-2" Size="Size.Small" Color="Color.Success" UncheckedColor="Color.Success">Success</MudCheckBox>
        <MudCheckBox @bind-Value="Basic_CheckBox32" class="mb-2" Size="Size.Small" Color="Color.Error" UncheckedColor="Color.Error">Error</MudCheckBox>
        <MudCheckBox @bind-Value="Basic_CheckBox33" Size="Size.Small" Color="Color.Dark" UncheckedColor="Color.Dark">Dark</MudCheckBox>
    </MudItem>
</MudGrid>

Colored Radio Buttons

Primary

Secondary

Warning

Success

Error

Dark

 <MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <MudRadioGroup @bind-Value="Radio_Colors" class="mud-column-radio-group colored-radio-button">
            <MudRadio Value="1" Color="Color.Primary" Size="Size.Small">Primary</MudRadio>
            <MudRadio Value="2" Color="Color.Secondary" Size="Size.Small">Secondary</MudRadio>
            <MudRadio Value="3" Color="Color.Warning" Size="Size.Small">Warning</MudRadio>
            <MudRadio Value="4" Color="Color.Success" Size="Size.Small">Success</MudRadio>
            <MudRadio Value="5" Color="Color.Error" Size="Size.Small">Error</MudRadio>
            <MudRadio Value="6" Color="Color.Dark" Size="Size.Small">Dark</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

Colored Switches

Primary

Secondary

Warning

Success

Error

Dark

 <MudSwitch @bind-Value="Basic_Switchprimary" Color="Color.Primary" Label="Primary" class="toggle-switch" />
<MudSwitch @bind-Value="Basic_Switchsecondary" Color="Color.Secondary" Label="Secondary" class="toggle-switch" />
<MudSwitch @bind-Value="Basic_Switchwarning" Color="Color.Warning" Label="Warning" class="toggle-switch" />
<MudSwitch @bind-Value="Basic_Switchsuccess" Color="Color.Success" Label="Success" class="toggle-switch" />
<MudSwitch @bind-Value="Basic_Switcherror" Color="Color.Error" Label="Error" class="toggle-switch" />
<MudSwitch @bind-Value="Basic_Switchdark" Color="Color.Dark" Label="Dark" class="toggle-switch" />

Icon Checkboxes

 <MudGrid>
    <MudItem xs="12" md="6" lg="12">
        <MudCheckBox @bind-Value="CheckBox1" Color="Color.Secondary" CheckedIcon="@Icons.Material.Filled.Favorite" UncheckedIcon="@Icons.Material.Filled.FavoriteBorder"></MudCheckBox>
        <MudCheckBox @bind-Value="CheckBox2" Color="Color.Tertiary" CheckedIcon="@Icons.Material.Filled.Bookmark" UncheckedIcon="@Icons.Material.Filled.BookmarkBorder"></MudCheckBox>
        <MudCheckBox @bind-Value="CheckBox3" Color="Color.Warning" CheckedIcon="@Icons.Material.Filled.Star" UncheckedIcon="@Icons.Material.Filled.StarOutline"></MudCheckBox>
    </MudItem>
</MudGrid>

Toggle Switches Style-1

 <MudGrid>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch9" Class="toggle-switch-custom toggle-Primary" Color="Color.Primary"  />
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch10" Class="toggle-switch-custom toggle-secondary" Color="Color.Secondary"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch11" Class="toggle-switch-custom toggle-warning" Color="Color.Warning"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch12" Class="toggle-switch-custom toggle-info" Color="Color.Info"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch13" Class="toggle-switch-custom toggle-success" Color="Color.Success"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch14" Class="toggle-switch-custom toggle-danger" Color="Color.Error"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
    <MudSwitch @bind-Value="Basic_Switch15" Class="toggle-switch-custom toggle-light"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch16" Class="toggle-switch-custom toggle-dark" Color="Color.Dark"/>
    </MudItem>
</MudGrid>

Toggle Switches Style-2

Primary

Secondary

Warning

Info

Success

Error

Light

Dark

 <MudGrid>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch17" Color="Color.Primary" UncheckedColor="Color.Primary" Label="Primary"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch18" Color="Color.Secondary" UncheckedColor="Color.Secondary" Label="Secondary"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch19" Color="Color.Warning" UncheckedColor="Color.Warning" Label="Warning"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch20" Color="Color.Info" UncheckedColor="Color.Info" Label="Info"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch21" Color="Color.Success" UncheckedColor="Color.Success" Label="Success"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch22" Color="Color.Error" UncheckedColor="Color.Error" Label="Error"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch24" Label="Light"/>
    </MudItem>
    <MudItem xs="12" md="6" lg="4">
        <MudSwitch @bind-Value="Basic_Switch23" Color="Color.Dark" UncheckedColor="Color.Dark" Label="Dark"/>
    </MudItem>
</MudGrid>