Skip to main content

Checkbox

The Checkbox component allows the user to select one or more items from a set.

The checkbox component has three states, checked, unchecked, and indeterminate. When used as a form component, a checkbox has two states, checked or unchecked.

The Checkbox component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
labelnodeSpecifies a label for the component.
valueanySpecifies a boolean value for the component; the default value is on.
checkedboolfalseSpecifies whether the component is checked
requiredboolfalseIf true, the checkbox must be checked.
indeterminateboolfalseIf true, a dash symbol appears on the checkbox, and you cannot modify its state.
disabledboolfalseIf true, the checkbox is disabled.

Style Attributes

NameTypeDefaultDescription
colordefault
primary
secondary
error
info
success
warning
string
primaryDefines the color of the component.
sizesmall
medium
string
mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string
endSpecifies the location of the checkbox label.
disableRippleboolfalseBy default, the checkbox component has a ripple effect triggered when the checkbox state is modified. To disable this effect, set "Disable Ripple" on.

Subcomponents

The Checkbox component has a subcomponent that allows an icon to be used in place of the standard checkmark.

Icon

Checked Icon - specifies an icon to use when the checkbox is checked.

Unchecked Icon - specifies an icon to use when the checkbox is unchecked.

Indeterminate Icon - specifies an icon to use when the checkbox is indeterminate.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

For more detail on the Checkbox component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.