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 within a Form Block.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Specifies the name of the component (form component only). | |
| label | node | Specifies a label for the component. | |
| value | any | Specifies a boolean value for the component; the default value is on. | |
| checked | bool | false | Specifies whether the component is checked |
| required | bool | false | If true, the checkbox must be checked. |
| indeterminate | bool | false | If true, a dash symbol appears on the checkbox, and you cannot modify its state. |
| disabled | bool | false | If true, the checkbox is disabled. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| color | default primary secondary error info success warning string | primary | Defines the color of the component. |
| size | small medium string | medium | Defines the size of the component. |
| labelPlacement | top bottom start end string | end | Specifies the location of the checkbox label. |
| disableRipple | bool | false | By 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
| Name | Type | Default | Description |
|---|---|---|---|
| color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
| size | inherit small medium large string | small | Defines the size of the icon. |
| viewBox | 0 0 24 24 | Defines the size of the view box that displays the icon. | |
| fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
| stroke | hex #ffffff rgb 5,5,5 | The stroke color of the icon. |
For more detail on the Checkbox component, see the MUI developer docs.