BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

CheckThreeComponent

@page "/"
@using BlazorFiddleProject
<h4>Example Checkbox ThreeState Component</h4>
    <CheckThreeComponent @ref="mychk1" Description="MyCheckBox#1" Checked="true"></CheckThreeComponent>
    <CheckThreeComponent @ref="mychk2" Description="MyCheckBox#2" Checked="false"></CheckThreeComponent>
    <CheckThreeComponent @ref="mychk3" Description="MyCheckBox#3"></CheckThreeComponent>
    <br>
    <button @onclick="MyReadChk">Read checkboxes values</button> @myread

@code
{
    private CheckThreeComponent mychk1;
    private CheckThreeComponent mychk2;
    private CheckThreeComponent mychk3;

    private string myread;

    private void MyReadChk()
    {
        myread = $"MyChebox#1={mychk1.Value} MyChebox#2={mychk2.Value} MyChebox#3={mychk3.Value}";
    }
    
}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.JSInterop;
    using System.Threading.Tasks;
    using System;

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder  app)
        {
            app.AddComponent<App>("app");
        }
    }


}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>

    <style>
    [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; }
    .bootstrap-checkbox { display: inline-block; position: relative; width: 13px; height: 13px; border: 1px solid #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
        .bootstrap-checkbox i { position: absolute; left: -2px; top: -3px; }
    .icon-stop { background-position: -312px -72px; }
    .icon-check { background-position: -288px 0px; }
    </style>

</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.