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
disabled	boolean \| null \| undefined	false	When true, the select's button is disabled and list is closed.
icon	Snippet \| undefined	undefined	The snippet to render the icon. Defaults to a chevron.
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.
value	Snippet<[string \| undefined]> \| string \| undefined	undefined	The string or snippet to display the value. The snippet is passed the selected value. If undefined, the selectedValue is displayed.
buttonSnippet	Snippet \| undefined	undefined	Deprecated. Use icon instead.
valueSnippet	Snippet<[string \| undefined]> \| undefined	undefined	Deprecated. Use value instead.

	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

<div class="sterling-select">
  <div class="value">
    {@render value()}
  </div>
  <div class="icon">
    {@render icon()}
  </div>
  <Popover>
    <div class="sterling-select-popup-content">
      <List>
        {@render children()}
      </List>
    </div>
  </Popover>
</div>