Checkbox - Fod.DemoPage

Quick Start

Basic checkbox usage with labels and descriptions.

Basic checkbox

Accept terms and conditions

With description

Subscribe to newsletterWe'll send you weekly updates

razor

<FodCheckbox Label="Accept terms and conditions" @bind-Value="_acceptTerms" />

<FodCheckbox Label="Subscribe to newsletter"
             Description="We will send you weekly updates"
             @bind-Value="_subscribe" />

Sizes

Checkboxes come in three sizes to fit different contexts.

Small (16px)

Small checkbox

Medium (20px) - Default

Medium checkbox

Large (24px)

Large checkbox

razor

<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" />

States

Checkboxes support various states including indeterminate for partial selection.

Default states

Unchecked

Checked

Indeterminate

Select all items

Disabled

Disabled unchecked

Disabled checked

Error state

Required field

This field is required

razor

<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 and Read-Only

Required checkboxes show an indicator, while read-only prevents changes but allows focus.

Required field

I agree to the terms of service

Read-only

Read-only unchecked

Read-only checked

razor

<FodCheckbox Label="I agree to the terms" Required="true" @bind-Value="_value" />

<FodCheckbox Label="Read-only" ReadOnly="true" Value="true" />

Forms Integration

Checkboxes integrate with EditForm for validation.

Form with validation

razor

<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>

Checkbox Groups

Group related checkboxes for multiple selections with a "Select All" option.

Select interests

Select All

Technology

Sports

Music

Travel

Selected: None

razor

<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" />

RTL Support (Right-to-Left)

Checkboxes support RTL languages with automatic layout mirroring.

אני מסכים לתנאי השירות

הירשם לניוזלטרנשלח לך עדכונים שבועיים

שדה נדרש

שדה זה נדרש

razor

<div dir="rtl">
    <FodCheckbox Label="אני מסכים לתנאי השירות" @bind-Value="_rtlAccept" />
    <FodCheckbox Label="הירשם לניוזלטר"
                 Description="נשלח לך עדכונים שבועיים"
                 @bind-Value="_rtlNewsletter" />
    <FodCheckbox Label="שדה נדרש"
                 Error="true"
                 ErrorText="שדה זה נדרש"
                 @bind-Value="_rtlError" />
</div>

Accessibility and Best Practices

FodCheckbox is built with accessibility in mind.

Native <input type="checkbox"> is used for full screen reader support.
Labels are always associated with inputs via wrapping <label> element.
aria-invalid is set when validation errors occur.
aria-describedby links error messages for screen readers.
Indeterminate state uses aria-checked="mixed" for proper announcement.
Space key toggles the checkbox when focused.
Touch targets are at least 44x44px for mobile accessibility.

API Reference

FodCheckbox component properties and their descriptions.

No properties defined.