Switch
23 Sep 20254 minutes to read
The Switch is a graphical user interface element that allows you to toggle between checked and unchecked states.
<input type="checkbox" id="switch"/>
<script>
var switchObj = new Switch({});
switchObj.appendTo("#switch");
</script>Properties
checked boolean
Specifies a value that indicates whether the Switch is checked or not.
When set to true, the Switch will be in checked state.
Defaults to false
cssClass string
You can add custom styles to the Switch by using this property.
Defaults to ’’
disabled boolean
Specifies a value that indicates whether the Switch is disabled or not.
When set to true, the Switch will be in disabled state.
Defaults to false
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
htmlAttributes { : }
You can add the additional html attributes such as disabled, value etc., to the element.
If you configured both property and equivalent html attribute then the component considers the property value.
Defaults to {}
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
name string
Defines name attribute for the Switch.
It is used to reference form data (Switch value) after a form is submitted.
Defaults to ’’
offLabel string
Specifies a text that indicates the Switch is in unchecked state.
Defaults to ’’
onLabel string
Specifies a text that indicates the Switch is in checked state.
Defaults to ’’
value string
Defines value attribute for the Switch.
It is a form data passed to the server when submitting the form.
Defaults to ’’
Methods
addEventListener
Adds the handler to the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event |
| handler | Function |
Specifies the call to run when the event occurs. |
Returns void
appendTo
Appends the control within the given HTML element
| Parameter | Type | Description |
|---|---|---|
| selector (optional) |
string | HTMLElement
|
Target element where control needs to be appended |
Returns void
attachUnloadEvent
Adding unload event to persist data when enable persistence true
Returns void
click
Click the switch element
its native method
Returns void
dataBind
When invoked, applies the pending property changes immediately to the component.
Returns void
destroy
Destroys the Switch widget.
Returns void
detachUnloadEvent
Removing unload event to persist data when enable persistence true
Returns void
focusIn
Sets the focus to Switch
its native method
Returns void
getLocalData
Returns the persistence data for component
Returns any
getRootElement
Returns the route element of the component
Returns HTMLElement
handleUnload
Handling unload event to persist data when enable persistence true
Returns void
refresh
Applies all the pending property changes and render the component again.
Returns void
removeEventListener
Removes the handler from the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event to remove |
| handler | Function |
Specifies the function to remove |
Returns void
toggle
Toggle the Switch component state into checked/unchecked.
Returns void
Inject
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
Events
beforeChange EmitType<BeforeChangeEventArgs>
This event is triggered before the state of the switch is changed in the Switch component.
change EmitType<ChangeEventArgs>
Triggers when Switch state has been changed by user interaction.
created EmitType<Event>
Triggers once the component rendering is completed.