<style>
    .single-tag-mode .k-input-values {
        float: left;
    }

        .single-tag-mode .k-input-values .k-chip {
            display: none;
        }

        .single-tag-mode .k-input-values:before {
            content: "Selected items: @SelectedProductIDs.Count";
            display: inline-block;
            line-height: 1.8em;
            padding: 0 7px;
            vertical-align: bottom;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
        }
</style>

<TelerikMultiSelect Class="single-tag-mode" Data="@Roles" @bind-Value="@SelectedProductIDs" Width="300px" AutoClose="false" Placeholder="Write the roles you need">
    <ItemTemplate>
        <input type="checkbox" id="@( "cb" + context.Replace(" ", "") )" class="k-checkbox k-rounded-md k-checkbox-md" checked="@GetChecked(context)">
        @context
    </ItemTemplate>
</TelerikMultiSelect>

@foreach (var item in SelectedProductIDs)
{
    <div>@item</div>
}

@code {
    bool GetChecked(string text)
    {
        return SelectedProductIDs.Contains(text);
    }

    List<string> SelectedProductIDs { get; set; } = new List<string>();

    List<string> Roles { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
    };
}