Select

A value and a button to open/close a list of choices.

Code

<script lang="ts">
  import { Select, ListItem } from '@geoffcox/sterling-svelte';

  let selectedValue : string;
  let items = [/* list of items */];
</script>

<Select bind:selectedValue>
  {#each items as item}
    <ListItem value={item} />
  {/each}
</Select>

Members

Property Name	Type	Default	Comment
buttonSnippet	Snippet \| undefined	undefined	The snippet to render the button. Defaults to a chevron.
disabled	boolean \| null \| undefined	false	When true, the select's button is disabled and list is closed.
listClass	string \| undefined	undefined	Additional class names to apply to the list.
onPending	(value: string) => void	undefined	Called when a value is selected in the list but not yet committed.
onSelect	(value: string) => void	undefined	Called when a value is selected.
open	boolean \| null \| undefined	false	When true, the select's dropdown is open.
selectedValue	string \| undefined	undefined	The value of the selected item.
valueSnippet	Snippet<[string \| undefined]> \| undefined	undefined	The snippet to render the value. Passed the selected value. Defaults to the selected value (string).

	Method Name	Parameters	Return Type	Comment
	scrollToSelectedItem			Scrolls to the selected item.

Considerations

Due to lack of styling capabilities with <select>, the Select component does not use <select>
Includes HTMLDivElement props, events, and methods.

Anatomy

select (<div>)
  value (<div>)
    value (Snippet) | selectedValue (string) | &nbsp;
  button (<div>)
    button (Snippet) | chevron (<div>)
  popover (<Popover>)
    content <div>)
      list (<List>)
        children (Snippet)