Switch

Importing

To use the switch component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/switch";

register(); // Now the switch component is ready to use!

Web (Option 2)

import { registerSwitch } from "@tapsioss/web-components";

registerSwitch(); // Now the switch component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/switch/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Switch } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-switch></tapsi-switch>

React

<Switch />

Properties

Name	Attribute Name	Description	Type	Default Value
selected	selected	Whether or not the switch is selected.	boolean	false
value	value	The value of the switch that is submitted with a form when selected. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value	string	"on"
required	required	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when reportValidity() is invoked when value is empty. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required	boolean	false
label	label	Defines a string value that can be used to name input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
labelledBy	labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
autofocus	autofocus	Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus	boolean	false

Events

Name	Description	Type	Bubbles	Cancelable
change	Fires when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.	Event	✅	❌
input	Fires when the value of an input element has been changed as a direct result of a user action.	Event	✅	❌