Checkbox Item Component
Default (brand)
Unchecked vs checked
razor
<CheckboxItem Label="Remember me"
Description="Save my login details for next time." />
<CheckboxItem Value="true"
Label="Remember me"
Description="Save my login details for next time." />Variants
Semantic variants: danger, success, warning
razor
<CheckboxItem Variant="danger" Value="true" Label="Delete my account" Description="..." />
<CheckboxItem Variant="success" Value="true" Label="Enable 2FA" Description="..." />
<CheckboxItem Variant="warning" Value="true" Label="Share usage data" Description="..." />Sizes
sm and md
razor
<CheckboxItem Size="sm" Value="true" Label="Small size" Description="..." />
<CheckboxItem Size="md" Value="true" Label="Medium size" Description="..." />Disabled
Inert states
razor
<CheckboxItem Disabled="true" Label="Disabled (unchecked)" Description="..." />
<CheckboxItem Disabled="true" Value="true" Label="Disabled (checked)" Description="..." />Icon indicator
Circular badge — checkmark when checked, question mark when unchecked
razor
<CheckboxItem IndicatorStyle="icon" Label="Unanswered question" Description="..." />
<CheckboxItem IndicatorStyle="icon" Value="true" Label="Confirmed" Description="..." />
<CheckboxItem IndicatorStyle="icon" Variant="success" Value="true" Label="Identity verified" Description="..." />
<CheckboxItem IndicatorStyle="icon" Variant="danger" Label="Pending review" Description="..." />Expandable (independent check + expand)
Chevron toggles the panel independently from the checkbox
razor
@* Check and expand are independent — clicking the chevron only opens the panel *@
<CheckboxItem @bind-Value="isChecked"
@bind-Expanded="isOpen"
Label="Email notifications"
Description="Receive updates about activity in your workspace.">
<p>Configure which email notifications you want to receive:</p>
<Checkbox Size="sm" Label="Weekly digest" />
<Checkbox Size="sm" Label="Mentions and replies" />
</CheckboxItem>Interactive (two-way bind)
Click the card to toggle
razor
<CheckboxItem @bind-Value="check1" Label="Subscribe to newsletter" Description="..." />
<CheckboxItem @bind-Value="check2" Variant="danger" Label="Confirm deletion" Description="..." />