Basic Checkbox

You must agree to use the service.
<PrimerCheckboxGroup SelectedValues="@Selected" SelectedValuesChanged="@OnChanged">
    <PrimerCheckbox Label="Terms Agreement"
                    LabelClassName="text-normal"
                    Description="You must agree to use the service." />
</PrimerCheckboxGroup>

Checkbox Group Example

<PrimerCheckboxGroup @ref="checkboxGroupRef"
                        @bind-SelectedValues="SelectedFruits"
                        DisabledValues="@(new() { "apple" })"
                        IsDisabled="false"
                        Direction="CheckboxDirection.Horizontal">
    <PrimerCheckbox Value="apple" Label="Apple" LabelClassName="ml-2 color-fg-success" />
    <PrimerCheckbox Value="banana" Label="Banana" LabelClassName="ml-2 text-normal" />
    <PrimerCheckbox Value="cherry" Label="Cherry" LabelClassName="ml-2 text-normal" />
</PrimerCheckboxGroup>

<PrimerElement Tag="ElementTag.P" ClassName="color-fg-danger text-small">@Error</PrimerElement>

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap4" >
    <PrimerButton @onclick="SelectAllFruits">Select All</PrimerButton>
    <PrimerButton @onclick="ClearFruits">Clear All</PrimerButton>
</PrimerStack>
           

Checkbox Options

Available options for Checkbox component

NameDescriptionDefault ValueCSS Class
SelectedValues
Selected checkbox values
new List<string>()
-
DisabledValues
List of disabled values
new List<string>()
-
IsDisabled
Disable all checkboxes
false
-
Direction
Layout direction (Horizontal or Vertical)
Vertical
-
Size
Checkbox size (Small, Medium, Large)
Medium
-
Label
Checkbox label text
-
-
Description
Additional description below checkbox
-
-
private List<string> Selected = new();
private List<string> SelectedFruits = new();
private string Error = "";

private PrimerCheckboxGroup checkboxGroupRef = default!;

private Task OnChanged(List<string> values)
{
    Selected = values;
    return Task.CompletedTask;
}

private async Task SelectAllFruits()
{
    await checkboxGroupRef.SelectAll(new() { "apple", "banana", "cherry" });
}

private async Task ClearFruits()
{
    await checkboxGroupRef.ClearAll();
}