Skip to main content

Toggle

Example#

Default toggle.

<>
<Toggle />
</>

Icons#

Define checked or unchecked icons by any type of icons prop.

Y
N
<>
<Toggle icons={{checked:"Y", unchecked:"N"}}/>
</>

Checked#

Make the toggle switch checked on start by adding defaultChecked prop.

<>
<Toggle defaultChecked/>
</>

Always checked#

Make the toggle switch checked but not switchable by adding checked prop.

<>
<Toggle checked/>
</>

Disabled toggle switch#

Make the toggle disabled by disabled prop.

<>
<Toggle disabled/>
</>

Make the toggle disabled by disabled prop when it's checked.

<>
<Toggle disabled checked/>
</>

API#

import Toggle from "erxes-ui/lib/components/Toggle";

* required prop

NameTypeDefaultDescription
valuestringDefine the value
namestringDefine the name
idstringDefine toggle id
checkedbooleanfalseSet the toggle always checked
defaultCheckedbooleanfalseSet the toggle checked on start
'aria-labelledby'stringThe value of the aria-labelledby attribute of the wrapped input element
'aria-label'stringThe value of the aria-label attribute of the wrapped input element
onFocusfunctionCallback function to invoke when field has focus
onBlurfunctionCallback function to invoke when field loses focus
disabledbooleanMake the toggle disabled
onChangefunctionCallback function to invoke when the user clicks on the toggle
iconsanyAdd an icon
Last updated on by enkhzule