Simple CheckBox renders as text input

Radzen.Blazor Components
1

Hi,
I'm new to Radzer components and I'm running into issues when trying to use the checkbox as per the example source code.
I have tried server side with target being .Net 5 and .Net core 3.1 as well as .Net 2.1 standard web assembly project in browsers edge, firefox and chrome. All of them resulting in a text input box instead of a checkbox. I'm wondering if there is something there needs to be setup not described in the https://blazor.radzen.com/checkbox source example?
I'm now on 3.0.10, but have also given 2.18.16 a spin but with the same result.

@page "/checkbox"
@using Radzen.Blazor 
<div class="row">
    <div class="col-xl-6">
        <h3>CheckBox</h3>
        <RadzenCheckBox @bind-Value=@checkBox1Value TValue="bool" Change=@(args => @OnChange(args, "CheckBox1 CheckBox")) />
        <RadzenLabel Text="CheckBox1" Component="CheckBox1" Style="margin-left: 5px;" />
        <h3 style="margin-top: 2rem">Tri State</h3>
        <RadzenCheckBox @bind-Value=@checkBox2Value TriState="true" TValue="bool?" Change=@(args => OnChange(args, "TriState CheckBox")) /><RadzenLabel Text="TriState" Style="margin-left: 5px" Component="CheckBox2" />
        <h3 style="margin-top: 2rem">Disabled</h3>
        <RadzenCheckBox @bind-Value=@checkBox3Value Disabled="true" TriState="true" TValue="bool?" /><RadzenLabel Text="Disabled" Style="margin-left: 5px" Component="CheckBox3" />
    </div>
    <div class="col-xl-6">
        
    </div>
</div>

@code {
    bool checkBox1Value;
    bool? checkBox2Value;
    bool? checkBox3Value = true;

    //EventConsole console;

    void OnChange(bool? value, string name)
    {
        //console.Log($"{name} value changed to {value}");
    }
}

Thx Kim

2

Hey @Kimb,

Most probably you’ve missed to register the CSS styles. Check our getting started for more info:

3

Hi enchev,
Thanks, that was spot on.
Thx Kim

4

I have a somewhat related question.

The checkbox is displayed as clickable box .. but only if I set it to "enabled" .. I need the checkbox not clickable but as status indicator. The related boolean variable is false .. the checkbox is invisible.

How do I give the checkbox a more appropriate style - similar to your checkbox demo.
we use the "_content/Radzen.Blazor/css/default.css" stylesheet

thanks for hints in advance

5

If you set checkbox to Disabled=true it will still bind state, display checkmark if needed and won't be clickable.

6

thx . found my error in the meantime .. in good old HTML-fassion I thought Disabled="true" is equal to disabled="true" .. the former works like you wrote , the other one is handled differently and leads webassembly to exclude the checkbox in question from being rendered to HTML-code ..