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

1.7.0 • Published 2 months ago

Install

Weekly downloads

345

License

Apache-2.0

Repository

Last release

2 months 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

4 months ago

0.0.0-20250211061642

6 months ago

5 months ago

4 months ago

0.0.0-20250210092211

6 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

0.0.0-20250327111926

5 months ago

0.0.0-20241211115453

8 months ago

5 months ago

5 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

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

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

0.0.0-20241211111227

8 months ago

9 months ago

8 months ago

8 months ago

9 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

2 months ago

5 months ago

1.7.0-snapshot.20250519200040

3 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

3 months ago

0.0.0-20241209155954

8 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

4 months ago

1.7.0-snapshot.20250519143559

3 months ago

4 months ago

6 months ago

1.0.1-color-testing

8 months ago

7 months ago

7 months ago

6 months ago

6 months ago

9 months ago

6 months ago

9 months ago

0.0.0-20250210113716

6 months ago

8 months ago

0.0.0-20250210080630

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

0.0.0-20250210081721

6 months ago

6 months ago

6 months ago

6 months ago

0.0.0-20241211112924

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

3 months ago

6 months ago

0.0.0-20250410163257

4 months ago

0.0.0-modal-performance-20250414163725

4 months ago

6 months ago

0.0.0-20250210075156

6 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

12 months ago

12 months ago

12 months 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

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

3 years ago

0.11.8-react.50

3 years ago

0.11.8-react.48

3 years ago

0.11.8-react.49

3 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

4 years ago

0.9.3-express.0

4 years ago

0.9.4-express.12

4 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

5 years ago

5 years ago

5 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

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

6 years ago

6 years ago

6 years ago