A modern, accessible, lightweight UI component library for Svelte.
Exciting News! sterling-svelte 2.0 is out and built on Svelte 5! Read all about it
here!
GETTING STARTED
COMPONENTS
INFRASTRUCTURE
List
An interactive, scrollable set of items where a single item can be selected
Code
<script lang="ts">
import { List } from '@geoffcox/sterling-svelte';
</script>
<List>
<!-- <ListItem> ... -->
</List>
Members
Property Name
Type
Default
Comment
disabled
string
false
When true, the list and all its items are disabled
horizontal
string
false
When true, items are arranged horizontally
selectedValue
string | undefined
undefined
The value of the currently selected item
variant
string
''
Additional class names to apply
variant
string
''
Additional class names to apply
Event Name
Data
Comment
select
value
Raised when the selectedValue changes
Method Name
Parameters
Return Type
Comment
scrollToItem
Scrolls to the item with the given value
selectItem
Selects the item with the given value
selectNextItem
Selects the item after the selected item
selectPreviousItem
Selects the item before the selected item
selectFirstItem
Selects the first item in the list
selectLastItem
Selects the last item in the list
Considerations
Use the default slot to provide list items.
A list item is identified by having data-value and role="listitem" properties. Any content without these properties, will not participate in selection. This allows you to mix in other content with list items such as search boxes, group headers, or decorations.
If no item is selected, selectNextItem selects the first item in the list and selectPreviousItem selects the last item in the list.
Includes HTMLAnchorElement props, event, and methods