Checkboxes are inputs that offer to the user the possibility to select one or more options from a range of attributes.


defaultChecked: booleanInitial state of the checkbox, only when it is uncontrolled.
checked: booleanfalseIf true, the component is checked. If undefined the component will be uncontrolled and the value will be managed internally by the component.
value: stringWill be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the checkbox is checked.
label: stringText to be placed next to the checkbox.
labelPosition: 'before' | 'after''before'Whether the label should appear after or before the checkbox.
name: stringName attribute of the input element.
disabled: booleanfalseIf true, the component will be disabled.
optional: booleanfalseIf true, the component will display (Optional) next to the label.
onChange: functionThis function will be called when the user clicks the checkbox. The new value will be passed as a parameter.
margin: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string'fitContent'Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
tabIndex: number0Value of the tabindex.