home Docs Components Samples

Checkbox

Checkbox input for boolean or multi-select form values.

Installation

Add the Checkbox component using the CLI:

shadcnblazor component add checkbox

Usage

The Checkbox component provides a boolean or multi-select form input. Use ChildContent for the label. Bind Checked for two-way state, or use CheckedChanged for one-way updates.

1
2
3
4
5
<Checkbox @bind-Checked="_checked">Accept terms</Checkbox>

@code {
    private bool _checked;
}

Examples

With Label

Place the label text in ChildContent. The entire label is clickable to toggle the checkbox.

1
2
3
4
5
6
7
8
9
<div class="flex flex-col gap-4">
    <Checkbox @bind-Checked="_accept">I accept the terms and conditions</Checkbox>
    <Checkbox @bind-Checked="_newsletter">Subscribe to newsletter</Checkbox>
</div>

@code {
    private bool _accept;
    private bool _newsletter = true;
}

Grouping

Use a container with multiple Checkbox components. Bind each via Checked and CheckedChanged to a shared collection (e.g. HashSet<string>) in the parent. No separate group component—the layout and parent state define the group.

Selected:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex flex-col gap-2">
    <Checkbox Checked="@_selected.Contains("email")" CheckedChanged="@(v => Toggle("email", v))">Email notifications</Checkbox>
    <Checkbox Checked="@_selected.Contains("sms")" CheckedChanged="@(v => Toggle("sms", v))">SMS notifications</Checkbox>
    <Checkbox Checked="@_selected.Contains("push")" CheckedChanged="@(v => Toggle("push", v))">Push notifications</Checkbox>
</div>
<p class="text-sm text-muted-foreground mt-2">Selected: @string.Join(", ", _selected)</p>

@code {
    private HashSet<string> _selected = new();

    private void Toggle(string value, bool checked_)
    {
        if (checked_)
            _selected.Add(value);
        else
            _selected.Remove(value);
    }
}

Alignment

Use the Alignment parameter to control how the checkbox aligns with its label when the label wraps to multiple lines. Options are VerticalAlignment.Top, VerticalAlignment.Center (default), and VerticalAlignment.Bottom.

Top

Center (default)

Bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-col gap-6">
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">Top</p>
        <Checkbox @bind-Checked="_top" Alignment="VerticalAlignment.Top">
            This is a longer label that wraps to multiple lines so you can see how the checkbox aligns to the top of the text block.
        </Checkbox>
    </div>
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">Center (default)</p>
        <Checkbox @bind-Checked="_center" Alignment="VerticalAlignment.Center">
            This is a longer label that wraps to multiple lines so you can see how the checkbox aligns to the center of the text block.
        </Checkbox>
    </div>
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">Bottom</p>
        <Checkbox @bind-Checked="_bottom" Alignment="VerticalAlignment.Bottom">
            This is a longer label that wraps to multiple lines so you can see how the checkbox aligns to the bottom of the text block.
        </Checkbox>
    </div>
</div>

@code {
    private bool _top;
    private bool _center;
    private bool _bottom;
}

Alignment with label and description

Use Alignment="VerticalAlignment.Top" when you have a main label with a description underneath. The checkbox aligns with the top of the label so it stays visually anchored to the primary text.

1
2
3
4
5
6
7
8
9
10
<Checkbox @bind-Checked="_checked" Alignment="VerticalAlignment.Top">
    <div>
        <span class="font-semibold">Accept terms and conditions</span>
        <p class="text-sm text-muted-foreground mt-1">By clicking this checkbox, you agree to the terms and conditions.</p>
    </div>
</Checkbox>

@code {
    private bool _checked;
}

Disabled

Use the Disabled parameter to prevent interaction. The checkbox is dimmed and cannot be toggled.

1
2
3
4
5
<Checkbox @bind-Checked="_enabled" Disabled="true">Enable notifications</Checkbox>

@code {
    private bool _enabled;
}

Invalid state

Set Invalid="true" to show the invalid state. The checkbox gets a red border and ring, and the label text turns red. Use this when validation fails (e.g. a required checkbox that must be checked before submit).

1
2
3
4
5
<Checkbox @bind-Checked="_checked" Invalid="true">Accept terms and conditions</Checkbox>

@code {
    private bool _checked;
}

API Reference

Checkbox

Checkbox input for boolean or multi-select form values.

Properties

Name Type Description
AdditionalAttributes Dictionary<string, Object>
Alignment VerticalAlignment Vertical alignment of the checkbox relative to its label.
Checked bool Whether the checkbox is checked.
CheckedChanged EventCallback<bool> Callback invoked when the checked state changes.
ChildContent RenderFragment Content to display alongside the checkbox (e.g., label).
Class string
Disabled bool Whether the checkbox is disabled.
Invalid bool Whether the checkbox is in an invalid state. When true, sets aria-invalid="true" and applies invalid styling.
Size Size The size of the checkbox.

Events

Name Type Description
CheckedChanged EventCallback<bool> Callback invoked when the checked state changes.

Methods

Method Returns Description
Equals bool
GetHashCode int
GetType Type
SetParametersAsync Task
ToString string
Mobile support for API reference coming soon.

Loading...

An unhandled error has occurred. Reload 🗙