Checkbox Item Component

Remember meSave my login details for next time.

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

Delete my accountThis action is irreversible. All data will be permanently removed.

Enable two-factor authenticationAdds an extra layer of security to your sign-in.

Share anonymous usage dataHelps us improve the product. You can opt out at any time.

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

Small sizeCompact padding for dense forms.

Medium sizeDefault size for most use cases.

<CheckboxItem Size="sm" Value="true" Label="Small size"  Description="..." />
<CheckboxItem Size="md" Value="true" Label="Medium size" Description="..." />

Disabled (unchecked)You cannot select this option.

Disabled (checked)This option is locked on.

<CheckboxItem Disabled="true" Label="Disabled (unchecked)" Description="..." />
<CheckboxItem Disabled="true" Value="true" Label="Disabled (checked)" Description="..." />

Email verifiedConfirmed on 14 May 2026.

Phone verifiedNo phone number on file.

Two-factor authenticationActive — authenticator app.

Background checkThe chevron stays clickable so readers can expand details.

@* Readonly — state is shown but not toggleable; colors stay vivid (unlike Disabled) *@
<CheckboxItem Readonly="true" Value="true" Label="Email verified" Description="Confirmed on 14 May 2026." />
<CheckboxItem Readonly="true" Label="Phone verified" Description="No phone number on file." />
<CheckboxItem Readonly="true" Variant="success" Value="true" Label="Two-factor authentication" Description="..." />

@* The expand/collapse chevron stays interactive even when Readonly *@
<CheckboxItem Readonly="true" @bind-Expanded="isOpen" Value="true" Label="Background check" Description="...">
    <p>Completed by Acme Screening on 2 May 2026. Result: clear.</p>
</CheckboxItem>

Unanswered questionTap to confirm you have read this item.

ConfirmedYou have acknowledged this item.

Identity verifiedYour government ID has been confirmed.

Pending reviewThis item still needs your attention.

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

Email notificationsReceive updates about activity in your workspace.

Configure which email notifications you want to receive:

Weekly digest Mentions and replies Marketing and product updates

Email notificationsReceive updates about activity in your workspace.

Configure which email notifications you want to receive:

Weekly digest Mentions and replies Marketing and product updates

Two-factor authenticationRequire a second factor when signing in.

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

Subscribe to newsletterCurrently not subscribed.

Confirm deletionDeletion is not confirmed.

<CheckboxItem @bind-Value="check1" Label="Subscribe to newsletter" Description="..." />
<CheckboxItem @bind-Value="check2" Variant="danger" Label="Confirm deletion" Description="..." />

Checkbox Item Component

Default (brand)

Variants

Sizes

Disabled

Read-only (display-only)

Icon indicator

Expandable (independent check + expand)

Interactive (two-way bind)