Spectrum Packages

An `<sp-link>` allow users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.

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.

`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

The Spectrum CSS checkbox component

The Spectrum CSS buttongroup component

The Spectrum CSS fieldlabel component

The Spectrum CSS dialog component

`<sp-toast>` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

The Spectrum CSS toast component

The Spectrum CSS actionbar component

The Spectrum CSS fieldgroup component

The Spectrum CSS asset component

The Spectrum CSS avatar component

The Spectrum CSS radio component

The Spectrum CSS statuslight component

The Spectrum CSS coachmark component

The Spectrum CSS illustratedmessage component

The Spectrum CSS dropzone component

An `<sp-illustrated-message>` displays an illustration icon and a message, usually in an empty state or on an error page. It is also used inside a DropZone.

`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.