An `<sp-switch>` is used to turn an option on or off. Switches allow users to select the state of a single option at a time. Use a switch rather than a checkbox when activating (or deactivating) an option, instead of selecting.
npm install @spectrum-web-components/switchAn
``
yarn add @spectrum-web-components/switch
Import the side effectful registration of via:
`
import '@spectrum-web-components/switch/sp-switch.js';
When looking to leverage the Switch base class as a type and/or for extension purposes, do so via:
`
import { Switch } from '@spectrum-web-components/switch';
A switch consists of a switch input and slotted label.
`html`
#### Checked
A switch can be checked by setting the checked property/attribute.
`html demo`
#### Sizes
`html`
`html`
`html`
`html`
#### Emphasized
Emphasized switches, which use the empahasized attribute/property are a
secondary style for switches. The blue color provides a visual prominence
that is optimal for forms, settings, etc. where the switches
need to be noticed.
`html`
A switch can be disabled using the disabled property/attribute.
`html demo`
#### Handling events
Event handlers for clicks and other user actions can be registered on an similar to a standard element.
`html`
Web component
Switch are rendered in HTML using the element with the appropriate accessibility role, switch. When the Switch is checked, the appropriate ARIA state attribute will automatically be applied.
#### Include a label
A switch is required to have either a visible text label nested inside itself.
`html`
Standalone switches should be used in situations where the context is clear without an associated text label. For example, a switch located at the top of a panel next to the panel's title makes it clear that the switch will enable/disable the panel options.
In those cases, you can use CSS to visually hide the text label.
`html
Notifications
``