CheckboxGroup and CheckboxGroupField

The CheckboxGroup component enables users to select one or more options from a group of checkboxes, with support for model binding and validation. The CheckboxGroupField component extends this functionality by wrapping CheckboxGroup within a complete form field experience, including a label, help text, and validation messages.

CheckboxGroup Example

In the example below, an EditForm is used with a CheckboxGroup to capture multiple interests from a user. The Interests property of the Customer model is utilized for binding.

Source

<EditForm Model="Model" class="form-children-spacing">
    <RzValidationSummary />
    <CheckboxGroup TValue="string" For="@(() => Model.Interests)" Orientation="@Orientation.Vertical">
        <CheckboxGroupItem TValue="string" Value="@("Sports")" Title="Sports" />
        <CheckboxGroupItem TValue="string" Value="@("Music")" Title="Music" />
        <CheckboxGroupItem TValue="string" Value="@("Travel")" Title="Travel" />
        <CheckboxGroupItem TValue="string" Value="@("Technology")" Title="Technology" />
    </CheckboxGroup>
</EditForm>

CheckboxGroupField Example

The CheckboxGroupField component encapsulates a complete form field experience by combining a label, the checkbox group, help text, and validation messages. The example below demonstrates its usage with the Interests property of the Customer model.

Source

<CheckboxGroupField TValue="string" For="@(() => Model.Interests)" DisplayName="Select Your Interests" Orientation="Orientation.Vertical">
 <CheckboxGroupContent>
  <CheckboxGroupItem TValue="string" Value="@("Sports")" Title="Sports"/>
  <CheckboxGroupItem TValue="string" Value="@("Music")" Title="Music"/>
  <CheckboxGroupItem TValue="string" Value="@("Travel")" Title="Travel"/>
  <CheckboxGroupItem TValue="string" Value="@("Technology")" Title="Technology"/>
 </CheckboxGroupContent>
 <FieldHelp>Select all interests that apply.</FieldHelp>
</CheckboxGroupField>

Customer Model Reference

The following code defines a sample Customer model that is used in these examples:

Source

<!-- Customer.cs -->
<summary>
Represents a customer with personal and contact information.
</summary>
public class Customer
{
    <summary>
    Gets or sets the unique identifier for the customer.
    </summary>
    public int CustomerId { get; set; } = 1234;

    <summary>
    Gets or sets the full name of the customer.
    </summary>
    [MaxLength(10)]
    public string Name { get; set; } = "Jane Johnson";

    <summary>
    Gets or sets the email address of the customer.
    </summary>
    public string Email { get; set; } = "johnsonj@gmail.com";

    <summary>
    Gets or sets the phone number of the customer.
    </summary>
    public string PhoneNumber { get; set; } = "555-555-5555";

    <summary>
    Gets or sets the age of the customer.
    </summary>
    public int Age { get; set; } = 29;

    <summary>
    Gets or sets a value indicating whether the customer is active.
    </summary>
    public bool IsActive { get; set; } = true;

    <summary>
    Gets or sets the gender of the customer.
    </summary>
    public string Gender { get; set; } = "female";

    <summary>
    Gets or sets the preferred method of contact for the customer.
    </summary>
    public string PreferredContactMethod { get; set; } = "email";

    <summary>
    Gets or sets the birth date of the customer.
    </summary>
    public DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-29).AddMonths(3).AddDays(9);

    <summary>
    Gets or sets the interests of the customer.
    This property is used to demonstrate the checkbox group components.
    </summary>
    public List<string> Interests { get; set; } = new List<string> { "Sports" };
}