1. Home
  2. Forum
  3. Blazor
  4. Checkbox not showing tick

Checkbox not showing tick

This is my code: 

<SfTooltip ID="SSAOTooltip" IsSticky="false" Target="#SSAOCheckbox" OpensOn="Hover"
                                                   CssClass="e-primary">
                                            <hr>
                                            <SfCheckBox ID="SSAOCheckbox" Label="SSAO" @bind-Checked="@graphicsSettings.SSAO"></SfCheckBox>
                                            <strong>@(graphicsSettings.SSAO != false ? "On" : "Off" )</strong>
                                        </SfTooltip>

I want to create a checkbox for a property i have. However i have found that it does not show a tick like in the documentation. Because of this i had to add a true or false text next to the checkbox so the user could see if the option is on or off.



This is what it looks like. As you can see it's very unclear without the text saying if it's on or off. I'm not sure what i've done wrong, is there an extra option for adding the tick to make the checkbox clearer?


3 Replies
GK Gayathri KarunaiAnandam Syncfusion Team January 7, 2022 08:37 AM UTC

Hi Dylan Goerke, 

We are unable to replicate any issue in our end. We have prepared a sample by using the given code snippet in which the checked state of Checkbox is working fine.  

Code: 

<SfTooltip ID="SSAOTooltip" IsSticky="false" Target="#SSAOCheckbox" OpensOn="Hover" 
                                                   CssClass="e-primary"> 
                                            <hr> 
                                            <SfCheckBox ID="SSAOCheckbox" Label="SSAO" @bind-Checked="SSAO"></SfCheckBox> 
                                            <strong>@(SSAO != false ? "On" : "Off" )</strong> 
                                             
                                        </SfTooltip> 
    @code{ 
        public bool SSAO = true; 
       
    } 
 
For your convenience, please check the below sample link. 


Please check the below video demonstration and output. 


Output Screenshot: 
 
If you are still facing the issue, kindly share the below details. 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample.  
·        Please share the Syncfusion version you are using.  
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

Regards, 
Gayathri K 


DG Dylan Goerke January 10, 2022 07:32 AM UTC

My checkbox was nested inside of some over components so i decided to take it outside and test it. I managed to get a tick to show but it quickly disappears. I decided to try the code from the documentation for creating a checked checkbox, https://blazor.syncfusion.com/documentation/check-box/accessibility . 


<SfCheckBox @bind-Checked="isChecked" Label="Checked State"></SfCheckBox>
<br />
@code {
    private bool isChecked = true;
}


So that is the code for a checked state checkbox, when viewing it however this is what i get: 

However when hovering over the checkbox i can see the tick:

 

But it doesn't stay up. Sorry if this is an issue on my side not yours, just trying to figure out what i'm doing wrong.


SP Sangeetha Priya Murugan Syncfusion Team January 11, 2022 03:00 PM UTC

Hi Dylan Goerke,  
 
We have validated your reported issue based on your provided codes and we are not able to replicate your issue in our end. For your convenience, we have prepared the sample and video demonstration of this issue, please find the below links. 
 
 
 
Could you please check the above links and kindly replicate your issue in the attached sample and send back to us with video demonstration, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Sangeetha M 


Loader.
Up arrow icon