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.


defaultCheckedbooleanInitial state of the switch, only when it is uncontrolled.-
checkedbooleanIf true, the component is checked. If undefined, the component will be uncontrolled and the checked attribute will be managed internally by the component.false
valuestringWill 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.-
labelstringText to be placed next to the switch.-
labelPosition'before' | 'after'Whether the label should appear after or before the switch.'before'
namestringName attribute of the input element.-
disabledbooleanIf true, the component will be disabled.false
optionalbooleanIf true, the component will display '(Optional)' next to the label.false
onChange(checked: boolean) => voidThis function will be called when the user clicks the switch. The new value of the checked attribute will be passed as a parameter.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
size'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'Size of the component.'fitContent'
tabIndexnumberValue of the tabindex attribute.0
refReact.Ref <HTMLDivElement>Reference to the component.-