1.7.0 • Published 24 days ago

@spectrum-web-components/switch v1.7.0

Weekly downloads
345
License
Apache-2.0
Repository
github
Last release
24 days 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

See it on NPM! How big is this package in your project? Try it on Stackblitz

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>
1.6.0

2 months ago

1.4.1-beta.0

3 months ago

1.5.0

3 months ago

1.4.0

3 months ago

1.1.0-beta.50

7 months ago

1.1.0-beta.51

7 months ago

1.1.0-beta.54

7 months ago

1.1.0-beta.55

7 months ago

1.1.0-beta.52

7 months ago

1.1.0-beta.53

7 months ago

1.4.0-beta.0

4 months ago

1.3.0

4 months ago

1.1.0-beta.10

8 months ago

1.1.0-beta.11

8 months ago

1.1.0-beta.14

8 months ago

1.1.0-beta.15

8 months ago

1.1.0-beta.12

8 months ago

1.1.0-beta.13

8 months ago

1.1.0-beta.18

8 months ago

1.1.0-beta.19

8 months ago

1.3.0-testing.0

4 months ago

1.1.0-beta.16

8 months ago

1.1.0-beta.17

8 months ago

1.1.0-beta.9

8 months ago

1.1.0-beta.8

8 months ago

1.1.0-beta.7

8 months ago

1.1.0-beta.2

8 months ago

1.1.0-beta.21

8 months ago

1.1.0-beta.6

8 months ago

1.1.0-beta.22

8 months ago

1.1.0-beta.5

8 months ago

1.1.0-beta.4

8 months ago

1.1.0-beta.20

8 months ago

1.1.0-beta.3

8 months ago

1.1.0-beta.25

8 months ago

1.1.0-beta.26

8 months ago

1.1.0-beta.23

8 months ago

1.1.0-beta.24

8 months ago

1.1.0-beta.29

8 months ago

1.1.0-beta.27

8 months ago

1.1.0-beta.28

8 months ago

1.1.0-beta.32

8 months ago

1.1.0-beta.33

8 months ago

1.1.0-beta.30

8 months ago

1.1.0-beta.31

8 months ago

1.1.0-beta.36

8 months ago

1.1.0-beta.37

7 months ago

1.1.0-beta.34

8 months ago

1.1.0-beta.35

8 months ago

1.1.0-beta.38

7 months ago

1.1.0-beta.39

7 months ago

1.3.1-beta.0

4 months ago

1.1.0-beta.40

7 months ago

1.1.0-beta.43

7 months ago

1.1.0-beta.44

7 months ago

1.1.0-beta.41

7 months ago

1.1.0-beta.42

7 months ago

1.1.0-beta.47

7 months ago

1.1.0-beta.48

7 months ago

1.1.0-beta.45

7 months ago

1.1.0-beta.46

7 months ago

1.1.0-beta.49

7 months ago

1.7.0

24 days ago

1.5.0-beta.0

3 months ago

1.3.0-beta.1

4 months ago

1.3.0-beta.2

4 months ago

1.3.0-beta.3

4 months ago

1.3.0-beta.4

4 months ago

1.3.0-beta.5

4 months ago

1.3.0-beta.6

4 months ago

1.3.0-beta.0

4 months ago

1.5.1-beta.0

3 months ago

1.6.0-beta.0

3 months ago

1.2.0

4 months ago

1.1.1

5 months ago

1.1.0

5 months ago

1.1.2

5 months ago

1.2.0-beta.9

4 months ago

1.0.2

7 months ago

1.2.0-beta.8

4 months ago

1.0.1

8 months ago

1.0.3

7 months ago

1.2.0-beta.1

5 months ago

1.2.0-beta.0

5 months ago

1.2.0-beta.3

5 months ago

1.2.0-beta.2

5 months ago

1.2.0-beta.5

5 months ago

1.2.0-beta.4

5 months ago

1.2.0-beta.7

4 months ago

1.2.0-beta.6

5 months ago

1.2.0-beta.16

4 months ago

1.2.0-beta.15

4 months ago

1.2.0-beta.18

4 months ago

1.2.0-beta.17

4 months ago

1.2.0-beta.12

4 months ago

1.2.0-beta.11

4 months ago

1.2.0-beta.14

4 months ago

1.2.0-beta.13

4 months ago

1.6.1-beta.0

2 months ago

1.2.0-beta.10

4 months ago

1.2.0-beta.19

4 months ago

1.0.0-rc.9

8 months ago

1.0.0-rc.7

8 months ago

1.0.0-rc.8

8 months ago

1.0.0-rc.5

8 months ago

1.0.0-rc.6

8 months ago

1.0.0-rc.10

8 months ago

1.0.0-rc.3

8 months ago

1.0.0-rc.4

8 months ago

1.0.0-rc.1

8 months ago

1.0.0-rc.2

8 months ago

0.50.0-beta.11

8 months ago

0.50.0-beta.12

8 months ago

0.50.0-beta.10

8 months ago

1.1.0-beta.1

8 months ago

1.1.0-beta.0

8 months ago

0.50.0-beta.9

8 months ago

0.50.0-beta.8

8 months ago

0.50.0-beta.7

8 months ago

0.50.0-beta.6

8 months ago

0.50.0-beta.5

8 months ago

0.50.0-beta.4

8 months ago

1.0.0

8 months ago

0.50.0-beta.3

8 months ago

0.50.0-beta.2

8 months ago

1.0.0-rc.0

9 months ago

0.50.0-beta.1

9 months ago

0.49.0-beta.2

9 months ago

0.50.0-beta.0

9 months ago

0.49.0

9 months ago

0.49.0-beta.1

9 months ago

0.48.0-beta.0

9 months ago

0.48.0-beta.1

9 months ago

0.48.0-beta.2

9 months ago

0.49.0-beta.0

9 months ago

0.48.1

9 months ago

0.43.0

1 year ago

0.44.0

12 months ago

0.45.0

11 months ago

0.42.5

1 year ago

0.48.0

10 months ago

0.46.0

11 months ago

0.47.1

10 months ago

0.47.2

10 months ago

0.47.0

11 months ago

0.42.4

1 year ago

0.42.3

1 year ago

0.42.2

1 year ago

0.42.1

1 year ago

0.42.0

1 year ago

0.41.2

1 year ago

0.41.1

1 year ago

0.41.0

1 year ago

0.40.5

1 year ago

0.40.4

1 year ago

0.40.3

1 year ago

0.40.2

2 years ago

0.40.1

2 years ago

0.35.1-rc.15

2 years ago

0.35.1-rc.25

2 years ago

0.35.1-rc.26

2 years ago

0.35.1-rc.24

2 years ago

0.38.0

2 years ago

0.35.1-rc.34

2 years ago

0.35.1-rc.43

2 years ago

0.35.1-rc.41

2 years ago

0.39.1

2 years ago

0.39.0

2 years ago

0.39.4

2 years ago

0.39.3

2 years ago

0.39.2

2 years ago

0.36.0

2 years ago

0.40.0

2 years ago

0.37.0

2 years ago

0.34.1-rc.0

2 years ago

0.34.0

2 years ago

0.35.0

2 years ago

0.31.1-react.21

2 years ago

0.32.0

2 years ago

0.31.1-react.3

2 years ago

0.31.1-react.2

2 years ago

0.33.2

2 years ago

0.33.0

2 years ago

0.30.0

2 years ago

0.31.0

2 years ago

0.11.10

2 years ago

0.11.11

2 years ago

0.11.12

2 years ago

0.11.13

2 years ago

0.11.8-react.75

2 years ago

0.11.9

2 years ago

0.11.8

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

2 years ago

0.11.5-react.54

3 years ago

0.11.5

3 years ago

0.11.6

2 years ago

0.11.7

2 years ago

0.11.0

3 years ago

0.11.1

3 years ago

0.11.2

3 years ago

0.11.3

3 years ago

0.11.4

3 years ago

0.9.14-devmode.0

3 years ago

0.9.14-devmode.7

3 years ago

0.10.0-devmode.0

3 years ago

0.10.0

3 years ago

0.9.12

3 years ago

0.9.13

3 years ago

0.9.14

3 years ago

0.9.15-devmode.0

3 years ago

0.9.9

3 years ago

0.9.10

3 years ago

0.9.11

3 years ago

0.9.8

3 years ago

0.9.7

3 years ago

0.9.6

3 years ago

0.9.5

3 years ago

0.9.5-express.9

3 years ago

0.9.4

3 years ago

0.9.3

3 years ago

0.9.3-express.0

3 years ago

0.9.4-express.12

3 years ago

0.9.2

3 years ago

0.8.1

4 years ago

0.9.0

4 years ago

0.9.1

4 years ago

0.8.0

4 years ago

0.8.1-lit-next.0

4 years ago

0.7.16

4 years ago

0.7.15

4 years ago

0.7.14

4 years ago

0.7.13

4 years ago

0.7.13-beta.32

4 years ago

0.7.13-alpha.30

4 years ago

0.7.12

4 years ago

0.7.13-alpha.1

4 years ago

0.7.12-alpha.1

4 years ago

0.7.11

4 years ago

0.7.10

4 years ago

0.7.11-alpha.1

4 years ago

0.7.9

4 years ago

0.7.10-alpha.1

4 years ago

0.7.9-alpha.14

4 years ago

0.7.9-alpha.13

4 years ago

0.7.9-alpha.12

4 years ago

0.7.9-alpha.1

4 years ago

0.7.8

4 years ago

0.7.8-alpha.0

4 years ago

0.7.7

4 years ago

0.7.7-alpha.0

4 years ago

0.7.6

4 years ago

0.7.5

4 years ago

0.7.5-alpha.26

4 years ago

0.7.5-alpha.23

4 years ago

0.7.5-alpha.21

4 years ago

0.7.5-alpha.17

4 years ago

0.7.5-alpha.10

4 years ago

0.7.5-alpha.11

4 years ago

0.7.5-alpha.12

4 years ago

0.7.5-beta.12

4 years ago

0.7.5-beta.13

4 years ago

0.7.5-beta.10

4 years ago

0.7.5-beta.11

4 years ago

0.7.5-beta.16

4 years ago

0.7.5-beta.17

4 years ago

0.7.5-beta.14

4 years ago

0.7.5-beta.15

4 years ago

0.7.5-alpha.9

4 years ago

0.7.4

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.3-alpha.33

4 years ago

0.6.3

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.4.5-alpha.178

4 years ago

0.5.0

4 years ago

0.5.0-alpha.40

4 years ago

0.4.5-alpha.169

4 years ago

0.4.5-alpha.85

5 years ago

0.4.5-alpha.84

5 years ago

0.4.5-alpha.60

5 years ago

0.4.4

5 years ago

0.4.4-alpha.0

5 years ago

0.4.3

5 years ago

0.4.3-beta.17

5 years ago

0.4.3-alpha.17

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.4-alpha.71

5 years ago

0.3.4

5 years ago

0.3.4-alpha.28

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.17-alpha.38

5 years ago

0.2.16

5 years ago

0.2.16-test.31

5 years ago

0.2.15

5 years ago

0.2.14

5 years ago

0.2.13

5 years ago

0.2.13-alpha.1

5 years ago

0.2.12

5 years ago

0.2.11

5 years ago

0.2.10

5 years ago

0.2.9

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.6

5 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.1

6 years ago