Checkbox
Checkboxes are inputs that offer to the user the possibility to select one or more options from a range of attributes.
Name | Default | Description |
---|---|---|
defaultChecked: boolean | Initial state of the checkbox, only when it is uncontrolled. | |
checked: boolean | false | If true, the component is checked. If undefined the component will be uncontrolled and the value will be managed internally by the component. |
value: string | Will 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: string | Text to be placed next to the checkbox. | |
labelPosition: 'before' | 'after' | 'before' | Whether the label should appear after or before the checkbox. |
name: string | Name attribute of the input element. | |
disabled: boolean | false | If true, the component will be disabled. |
optional: boolean | false | If true, the component will display (Optional) next to the label. |
onChange: function | This function will be called when the user clicks the checkbox. The new value will be passed as a parameter. | |
margin: string | object | Size 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: number | 0 | Value of the tabindex. |
ref: object | Reference to the component. |