ComponentsInputs and forms
Check box
A box that turns an option on or off, alone or as one of several independent choices. Use check boxes for choices confirmed with a button, and a switch for settings that apply at once.
Labels and binding
Bind Value to a bool. The Label parameter or child content becomes the clickable label.
Gift wrapped, without a receipt.
Every size and color
Size against Color for a checked box. The color appears only when checked; UncheckedColor colors the empty box.
| Size ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | ||||||||||||
| Medium | ||||||||||||
| Large |
Three states
Bind a bool? to allow an indeterminate value. With TriState, clicking cycles unchecked → checked → indeterminate.
Not yet checked by the kitchen.
Select all
A parent box summarizes its children: checked when all are, indeterminate when some are. Clicking it selects or clears the whole list.
Label placement
LabelPlacement puts the label on any side. Start and End follow the reading direction; Left and Right do not.
Custom icons
Replace the box with any icon pair. Keep a text label so the meaning does not depend on the icon alone.
Disabled, read-only, dense and required
Read-only keeps the box focusable but ignores clicks. A required box shows its error once the form validates.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudCheckBox
@bind-Value="_emailReceipt"
Label="Email me the receipt"
Color="Color.Primary" />