daisyBlazor

Checkbox

A daisyUI checkbox bound to a bool, with typed Color and Size. Use it for independent on/off choices; Checked is kept as an alias of Value for MudBlazor code.

Data input.checkboxReplaces MudCheckBox

Launch checklist

Run the migrations Update the changelog Notify customers

Examples

Playground

Email me the invoice

Label

Value

Color Color

Size Size

Disabled

ReadOnly

<Checkbox
          Label="Email me the invoice"
          Value="true"
          Color="Color.Primary" />

API

<Checkbox>

DaisyBlazor

Parameters

Checked bool
= false
MudBlazor-style alias for Value; used when CheckedChanged is wired or set to true.
Color Color
= Color.Default
Theme color mapped to checkbox-primary, checkbox-accent, etc.; Dark maps to checkbox-neutral; Default, Inherit and Surface add no color class.
Disabled bool
= false
Disables the input and ignores change events.
Indeterminate bool
= false
Shows the mixed (indeterminate) state, e.g. on a "select all" box when only some children are ticked. Applied through JS interop because it is a DOM property, not an attribute.
Label string
= null
Text rendered in a .label-text span next to the input.
ReadOnly bool
= false
Blocks the click's default action (the HTML readonly attribute does nothing on checkboxes) and ignores change events, so the state cannot be changed by the user.
Size Size
= Size.Medium
Input size: Small adds checkbox-sm, Large adds checkbox-lg; Medium uses the daisyUI default.
Value bool
= false
Whether the checkbox is checked; two-way bindable with @bind-Value.
Class string
= null
Extra CSS classes merged onto the wrapping <label> element.
Style string
= null
Inline CSS style applied to the wrapping <label> element.

Name	Type	Default	Description
Checked	bool	false	MudBlazor-style alias for Value; used when CheckedChanged is wired or set to true.
Color	Color	Color.Default	Theme color mapped to checkbox-primary, checkbox-accent, etc.; Dark maps to checkbox-neutral; Default, Inherit and Surface add no color class.
Disabled	bool	false	Disables the input and ignores change events.
Indeterminate	bool	false	Shows the mixed (indeterminate) state, e.g. on a "select all" box when only some children are ticked. Applied through JS interop because it is a DOM property, not an attribute.
Label	string	null	Text rendered in a .label-text span next to the input.
ReadOnly	bool	false	Blocks the click's default action (the HTML readonly attribute does nothing on checkboxes) and ignores change events, so the state cannot be changed by the user.
Size	Size	Size.Medium	Input size: Small adds checkbox-sm, Large adds checkbox-lg; Medium uses the daisyUI default.
Value	bool	false	Whether the checkbox is checked; two-way bindable with @bind-Value.
Class	string	null	Extra CSS classes merged onto the wrapping <label> element.
Style	string	null	Inline CSS style applied to the wrapping <label> element.

Events

CheckedChanged EventCallback<bool>
MudBlazor-style alias for ValueChanged; wiring it makes Checked the source of truth.
ValueChanged EventCallback<bool>
Raised with the new state when the user toggles the checkbox.

Name	Type	Description
CheckedChanged	EventCallback<bool>	MudBlazor-style alias for ValueChanged; wiring it makes Checked the source of truth.
ValueChanged	EventCallback<bool>	Raised with the new state when the user toggles the checkbox.

Content

ChildContent RenderFragment
Additional content rendered inside the label after the input and Label.

Name	Type	Description
ChildContent	RenderFragment	Additional content rendered inside the label after the input and Label.

From MudCheckBox

Checkbox keeps MudCheckBox's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Something went wrong while running the docs. Reload

Checkbox

Examples

Binding

Colors

Sizes and states

Select all