Boolean input component with tri-state support (checked, unchecked, indeterminate), labels, descriptions, and form validation integration.
Basic checkbox usage with labels and descriptions.
Basic checkbox
With description
<FodCheckbox Label="Accept terms and conditions" @bind-Value="_acceptTerms" />
<FodCheckbox Label="Subscribe to newsletter"
Description="We will send you weekly updates"
@bind-Value="_subscribe" />Checkboxes come in three sizes to fit different contexts.
Small (16px)
Medium (20px) - Default
Large (24px)
<FodCheckbox Label="Small" CheckboxSize="CheckboxSize.Small" @bind-Value="_value" />
<FodCheckbox Label="Medium" CheckboxSize="CheckboxSize.Medium" @bind-Value="_value" />
<FodCheckbox Label="Large" CheckboxSize="CheckboxSize.Large" @bind-Value="_value" />Checkboxes support various states including indeterminate for partial selection.
Default states
Indeterminate
Disabled
Error state
<FodCheckbox Label="Unchecked" @bind-Value="_unchecked" />
<FodCheckbox Label="Checked" @bind-Value="_checked" />
<FodCheckbox Label="Select all" Indeterminate="true" @bind-Value="_value" />
<FodCheckbox Label="Disabled" Disabled="true" Value="false" />
<FodCheckbox Label="Error" Error="true" ErrorText="Required" @bind-Value="_value" />Required checkboxes show an indicator, while read-only prevents changes but allows focus.
Required field
Read-only
<FodCheckbox Label="I agree to the terms" Required="true" @bind-Value="_value" />
<FodCheckbox Label="Read-only" ReadOnly="true" Value="true" />Checkboxes integrate with EditForm for validation.
Form with validation
<EditForm Model="@_form" OnSubmit="HandleSubmit">
<FodCheckbox Label="I agree" @bind-Value="_form.AcceptTerms" />
<FodCheckbox Label="Subscribe" @bind-Value="_form.Marketing" />
<FodButton HtmlType="submit"
Disabled="@(_form.AcceptTerms != true)">Submit</FodButton>
</EditForm>Group related checkboxes for multiple selections with a "Select All" option.
Select interests
<FodCheckbox Label="Select All"
Indeterminate="GetSelectAllIndeterminate()"
Value="GetSelectAllValue()"
ValueChanged="OnSelectAllChanged" />
<FodDivider Orientation="Orientation.Horizontal" />
<FodCheckbox Label="Option 1" @bind-Value="_option1" />
<FodCheckbox Label="Option 2" @bind-Value="_option2" />Checkboxes support RTL languages with automatic layout mirroring.
<div dir="rtl">
<FodCheckbox Label="אני מסכים לתנאי השירות" @bind-Value="_rtlAccept" />
<FodCheckbox Label="הירשם לניוזלטר"
Description="נשלח לך עדכונים שבועיים"
@bind-Value="_rtlNewsletter" />
<FodCheckbox Label="שדה נדרש"
Error="true"
ErrorText="שדה זה נדרש"
@bind-Value="_rtlError" />
</div>FodCheckbox is built with accessibility in mind.
<input type="checkbox"> is used for full screen reader support.<label> element.aria-invalid is set when validation errors occur.aria-describedby links error messages for screen readers.aria-checked="mixed" for proper announcement.FodCheckbox component properties and their descriptions.