<PrimerCheckboxGroup SelectedValues="@Selected" SelectedValuesChanged="@OnChanged">
<PrimerCheckbox Label="Terms Agreement"
LabelClassName="text-normal"
Description="You must agree to use the service." />
</PrimerCheckboxGroup>
<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>
Available options for Checkbox component
Name | Description | Default Value | CSS 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();
}