Components
Every component is a standard HTML element that works in any framework. Pick one to see its API, examples, and browser support.
No components match your search.
Form
Select sv-select sv-select adds listbox selection, keyboard navigation, and form participation to a nested sv-flyout. Combobox sv-combobox sv-combobox combines an editable text field with a listbox. Slider sv-slider sv-slider is a range control for selecting one or more ordered numeric values by dragging or using the keyboard. Radio sv-radio sv-radio is a radio button that groups like a native one. Rating sv-rating sv-rating lets users pick a value by clicking or dragging across a row of shapes. Segmented Control sv-segmented-control sv-segmented-control is a single-selection control, comparable to a radio button group, that submits its selected value with forms. Toggle Switch sv-toggle-switch sv-toggle-switch toggles a single setting on or off. Toggle Checkbox sv-toggle-checkbox sv-toggle-checkbox selects or deselects a single independent option, with an indeterminate state for partial selections.
Action
Flyout sv-flyout sv-flyout presents supplementary content in an animated popover beside a trigger element. Menu sv-menu sv-menu adds command-menu and submenu keyboard behavior to a nested sv-flyout. Toggle sv-toggle sv-toggle is a button that switches a single option on or off and keeps the pressed state visible. Toggle Group sv-toggle-group sv-toggle-group coordinates a set of sv-toggle buttons: exclusive selection, whole-group disabling, and a combined value.
Layout
Accordion sv-accordion sv-accordion expands and collapses a section of content beneath a summary header. Collapsible sv-collapsible sv-collapsible expands and collapses content, and optionally manages the disclosure trigger for it. Dialog sv-dialog sv-dialog presents important information, requests decisions, or handles tasks in a modal or non-modal dialog above the page.
Feedback
Alert Stack sv-alert-stack sv-alert-stack displays stackable alerts on the page's top layer. Tooltip sv-tooltip sv-tooltip shows a short label beside an element on hover or keyboard focus. Progress Bar sv-progress-bar sv-progress-bar is a straight bar that visually represents progress. Progress Ring sv-progress-ring sv-progress-ring is an SVG-based ring that visually represents progress.
Utility
Text Flow sv-text-flow sv-text-flow animates rapidly changing text and works best for small text or numbers. Reveal Animation sv-reveal-animation sv-reveal-animation reveals elements as they scroll into view by toggling classes on them. Anchor sv-anchor sv-anchor positions an element beside an anchor rectangle and tries fallback placements until one fits inside the visible viewport. Expression Parser sv-expression-parser sv-expression-parser parses and evaluates user-defined expressions without eval() or new Function(). UI State sv-ui-state sv-ui-state brings reactive state to plain HTML: declare named stores, bind them to DOM elements, and the page updates automatically. Template sv-template sv-template stamps out HTML templates at runtime with real data.