Toggle

Example

<>
	<Toggle />
</>

Icons

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

<>
	<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
iconsbooleanAdd an icon

Was this page helpful?