Toggle
#
ExampleDefault toggle.
#
IconsDefine checked or unchecked icons by any type of icons
prop.
Y
N
#
CheckedMake the toggle switch checked on start by adding defaultChecked
prop.
#
Always checkedMake the toggle switch checked but not switchable by adding checked
prop.
#
Disabled toggle switchMake the toggle disabled by disabled
prop.
Make the toggle disabled by disabled
prop when it's checked.
#
APIName | Type | Default | Description |
---|---|---|---|
value | string | Define the value | |
name | string | Define the name | |
id | string | Define toggle id | |
checked | boolean | false | Set the toggle always checked |
defaultChecked | boolean | false | Set the toggle checked on start |
'aria-labelledby' | string | The value of the aria-labelledby attribute of the wrapped input element | |
'aria-label' | string | The value of the aria-label attribute of the wrapped input element | |
onFocus | function | Callback function to invoke when field has focus | |
onBlur | function | Callback function to invoke when field loses focus | |
disabled | boolean | Make the toggle disabled | |
onChange | function | Callback function to invoke when the user clicks on the toggle | |
icons | any | Add an icon |