Checkbox

Components for capturing boolean or multiple-choice selections from a user. Use `RzCheckbox` for a single true/false input and `RzCheckboxGroup` for selecting multiple options from a list.

Basic Checkbox

A standalone checkbox for a single boolean value, composed with `Field` and `FieldLabel` for proper form structure and accessibility.

Source

<EditForm Model="@_model">
    <Field Orientation="FieldOrientation.Horizontal">
        <RzCheckbox For="@(() => _model.AcceptTerms)" />
        <FieldLabel For="@(() => _model.AcceptTerms)" class="font-normal">Accept terms and conditions</FieldLabel>
    </Field>
</EditForm>

Checkbox with Description

Add a `FieldDescription` to provide more context for the checkbox.

Source

<Field Orientation="FieldOrientation.Horizontal" class="items-start">
    <RzInputCheckbox For="@(() => _model.AcceptTerms)" />
    <RzFieldGroup>
        <Field>
            <FieldLabel For="@(() => _model.AcceptTerms)" class="font-normal">Accept terms and conditions</FieldLabel>
            <FieldDescription>
                By clicking this checkbox, you agree to the terms and conditions.
            </FieldDescription>
        </Field>
    </RzFieldGroup>
</Field>

Checkbox Group

Use `RzCheckboxGroup` within an `Field` to bind multiple options to a collection. This example binds to the `TaskNotifications` list on the model.

Source

<Field>
    <FieldLabel For="@(() => _model.TaskNotifications)">Tasks</FieldLabel>
    <FieldDescription>
        Get notified when tasks you've created have updates.
        <RzLink Href="#">Manage tasks</RzLink>
    </FieldDescription>
    <RzCheckboxGroup For="@(() => _model.TaskNotifications)" class="mt-2">
        <RzCheckboxGroupItem TValue="string" Value="@("push")">
            <span class="text-sm">Push notifications</span>
        </RzCheckboxGroupItem>
        <RzCheckboxGroupItem TValue="string" Value="@("email")">
            <span class="text-sm">Email notifications</span>
        </RzCheckboxGroupItem>
    </RzCheckboxGroup>
</Field>

Choice Card Pattern

Create large, clickable "choice cards" by placing rich content inside an `RzCheckboxGroupItem`. The entire item acts as a label for the checkbox.

Source

<RzCheckboxGroup For="@(() => _model.NotificationPreferences)">
    <RzCheckboxGroupItem TValue="string" Value="@("enable-notifications")">
        <div class="flex w-full cursor-pointer items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-primary has-[[aria-checked=true]]:bg-accent/50 hover:bg-accent/50">
            <div class="grid gap-1.5 font-normal">
                <p class="text-sm font-medium leading-none">
                    Enable notifications
                </p>
                <p class="text-sm text-muted-foreground">
                    You can enable or disable notifications at any time.
                </p>
            </div>
        </div>
    </RzCheckboxGroupItem>
</RzCheckboxGroup>