Used in digital interfaces to switch a single setting or option on and off. Resembling a physical switch, it provides a clear visual cue of its state, making it intuitive for users. Toggles are commonly employed for binary settings like turning options on or off in applications and websites, offering a simpler alternative to checkboxes for immediate, single-action settings.
Installation
Follow these steps to install and use the ip-toggle in your project.
Step 1
Install the ip-toggle component as a dependency in your project:
npm install ip-toggle
Step 2
Import the module into your script file:
Usage
To use this component, add the properties as attributes.
Properties
| Property | Attribute | Necessity | Description | Type | Default |
|---|
| ariaLabel | aria-label | Required | It is the aria-label of content for accessibility. | string | Undefined |
| checked | checked | Optional | It is the initial state of checked. | boolean | False |
| activeLabel | active-label | Optional | This is the text that will be displayed when the toggle is active. | string | Undefined |
| inactiveLabel | inactive-label | Optional | This is the text that will be displayed when the toggle is inactive. | string | Undefined |
| toggleDisabled | toggle-disabled | Optional | When we need to set the toggle to disabled. | boolean | False |
| size | size | Optional | We have three predefined sizes: large, medium, small. | string | medium |
Content
We have predefined a slot for the label before the switch of the toggle if necessary:
slot="switch-label": This descriptive text informs the user about the function of the checkbox.
Customization
We have a set of predefined variables used to customize the toggle:
--primary-color--secondary-color--font-family--text-color
To update the values, use the following CSS:
Listening to Events
toggleChange: This event is emitted when the toggle state changes. The event detail is the state of checked.
Example
