@spectrum-web-components/switch NPM | npm.io

1.7.0 • Published 1 month ago

Install

Weekly downloads

345

License

Apache-2.0

Repository

Last release

1 month ago

Overview

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.

Usage

yarn add @spectrum-web-components/switch

Import the side effectful registration of <sp-switch> 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';

Anatomy

A switch consists of a switch input and slotted label.

<sp-switch>Email notifications</sp-switch>

Checked

A switch can be checked by setting the checked property/attribute.

<sp-field-group vertical>
    <sp-switch>Not checked</sp-switch>
    <sp-switch checked>Checked</sp-switch>
</sp-field-group>

Options

Sizes

<sp-switch size="s">Small</sp-switch>

<sp-switch size="m">Medium</sp-switch>

<sp-switch size="l">Large</sp-switch>

<sp-switch size="xl">Extra Large</sp-switch>

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.

<sp-field-group vertical>
    <sp-switch emphasized>Emphasized</sp-switch>
    <sp-switch emphasized checked>Emphasized and checked</sp-switch>
</sp-field-group>

States

A switch can be disabled using the disabled property/attribute.

<sp-field-group vertical>
    <sp-switch disabled>Disabled</sp-switch>
    <sp-switch disabled checked>Disabled and checked</sp-switch>
</sp-field-group>

Behaviors

Handling events

Event handlers for clicks and other user actions can be registered on an <sp-switch> similar to a standard <input type="checkbox"> element.

<sp-switch id="switch-example" onclick="spAlert(this, '<sp-switch> clicked!')">
    Web component
</sp-switch>

Accessibility

Switch are rendered in HTML using the <input type="checkbox"> 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 <sp-switch> itself.

<sp-switch>Email notifications</sp-switch>

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.

<div id="settings">
    <sp-field-label for="notifications-settings">Notifications</sp-field-label>
    <sp-switch id="notify">
        <span class="visually-hidden">Notifications</span>
    </sp-switch>
    <sp-field-group id="notifications-settings" vertical>
        <sp-switch disabled>Email</sp-switch>
        <sp-switch disabled>Telephone</sp-switch>
        <sp-switch disabled>Text</sp-switch>
    </sp-field-group>
</div>

<style>
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    #settings {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: calc(100% - 50px) 50px;
    }
    #notifications-settings {
        grid-column: 1 / 3;
        grid-row: 2;
    }
</style>

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base @spectrum-web-components/checkbox

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @spectrum-web-components/story-decorator @spectrum-web-components/bundle @swc-react/switch

3 months ago

0.0.0-20250211061642

5 months ago

4 months ago

3 months ago

0.0.0-20250210092211

6 months ago

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

0.0.0-20250327111926

4 months ago

0.0.0-20241211115453

8 months ago

4 months ago

4 months ago

0.0.0-20250210095839

6 months ago

1.7.0-snapshot.20250609112703

2 months ago

9 months ago

9 months ago

0.0.0-20241211113516

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1.3.0-testing.0

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

0.0.0-20250210074307

6 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

0.0.0-20241211111227

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

1.6.1-preview-2d9fabee.20250507183133

3 months ago

0.0.0-20241211112232

8 months ago

0.0.0-20241211071818

8 months ago

0.0.0-20250210104349

6 months ago

0.0.0-20241211070850

8 months ago

1 month ago

4 months ago

1.7.0-snapshot.20250519200040

2 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

2 months ago

0.0.0-20241209155954

8 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

3 months ago

1.7.0-snapshot.20250519143559

2 months ago

3 months ago

5 months ago

1.0.1-color-testing

8 months ago

6 months ago

6 months ago

5 months ago

5 months ago

8 months ago

5 months ago

9 months ago

0.0.0-20250210113716

6 months ago

8 months ago

0.0.0-20250210080630

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

0.0.0-20250210081721

6 months ago

5 months ago

5 months ago

5 months ago

0.0.0-20241211112924

8 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

3 months ago

5 months ago

0.0.0-20250410163257

4 months ago

0.0.0-modal-performance-20250414163725

3 months ago

5 months ago

0.0.0-20250210075156

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

12 months ago

1 year ago

10 months ago

12 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.33.3-overlay.66

2 years ago

0.33.3-overlay.65

2 years ago

0.33.3-overlay.61

2 years ago

0.31.1-react.21

2 years ago

2 years ago

2 years ago

2 years ago

0.30.1-overlay.30

2 years ago

0.33.1-overlay.39

2 years ago

0.30.1-overlay.31

2 years ago

2 years ago

2 years ago

0.30.1-overlay.38

2 years ago

0.30.1-overlay.37

2 years ago

0.30.1-overlay.41

2 years ago

0.30.1-overlay.42

2 years ago

0.30.1-overlay.40

2 years ago

2 years ago

0.33.1-overlay.41

2 years ago

0.32.1-overlay.33

2 years ago

0.32.1-overlay.41

2 years ago

2 years ago

0.31.1-overlay.29

2 years ago

0.11.14-overlay.10

2 years ago

0.11.14-overlay.14

2 years ago

0.11.14-overlay.13

2 years ago

0.11.14-overlay.12

2 years ago

0.11.14-overlay.11

2 years ago

0.11.14-overlay.18

2 years ago

0.11.14-overlay.17

2 years ago

0.11.14-overlay.15

2 years ago

0.11.12-overlay.22

2 years ago

0.11.12-overlay.9

2 years ago

0.11.12-overlay.8

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.11.10-overlay.0

2 years ago

0.11.8-react.75

2 years ago

2 years ago

2 years ago

0.11.8-react.50

2 years ago

0.11.8-react.48

2 years ago

0.11.8-react.49

2 years ago

0.11.8-react.32

3 years ago

0.11.5-react.54

3 years ago

0.11.7-overlay-warning.19

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.14-devmode.0

3 years ago

0.9.14-devmode.7

3 years ago

0.9.15-devmode2.0

3 years ago

0.10.0-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.15-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.5-express.9

3 years ago

3 years ago

3 years ago

0.9.3-express.0

4 years ago

0.9.4-express.12

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.8.1-lit-next.0

4 years ago

4 years ago

0.7.17-lit-next.0

4 years ago

0.7.16-lit-next.24

4 years ago

4 years ago

0.7.16-lit-next.0

4 years ago

0.7.15-lit-next.0

4 years ago

4 years ago

0.7.14-lit-next.0

4 years ago

4 years ago

4 years ago

0.7.13-alpha.30

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

0.4.5-alpha.178

5 years ago

5 years ago

5 years ago

0.4.5-alpha.169

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

0.2.17-alpha.38

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago