Switch toggles are elements that can get two simple states, each of them has an impact on the system and it can be switched on or off, there are no more options. If the switch toggle is on one state, the action to change it will modify to value of the element to the contrary.


defaultChecked: booleanInitial state of the switch, only when it is uncontrolled.
checked: booleanfalseIf true, the component is checked. If undefined, the component will be uncontrolled and the checked attribute 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 switch is checked.
label: stringText to be placed next to the switch.
labelPosition: 'before' | 'after''before'Whether the label should appear after or before the switch.
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 switch. The new value of the checked attribute 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.