Select

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

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
open	boolean	false	When true, the select's dropdown is open.
selectedValue	string \| undefined	undefined	The value of the selected item.
variant	string	''	Additional class names to apply
listVariant	string	''	Additional class names to apply to the List

	Event Name	Data	Comment
	pending	{ value: string }	Raised when a value is selected but not yet committed
	select	{ value: string }	Raised when a value is selected

	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, event, and methods

Anatomy

<div class="sterling-select">
  <div class="value">
    <slot name="value" {disabled} {open} {selectedValue} {variant}>
      {selectedValue}
    </slot>
  </div>
  <div class="button">
    <slot name="button" {disabled} {open} {selectedValue} {variant}>
      <slot name="icon" {disabled} {open} {selectedValue} {variant}>
        <div class="chevron" />
      </slot>
    </slot>
  </div>
  <Popover>
    <div class="sterling-select-popup-content">
      <List>
        <!-- Items to display in the dropdown -->
        <slot {variant} {listVariant} />
      </List>
    </div>
  </Popover>
</div>