Select

A value that can be selected from a dropdown list of values.

Props

HTMLDivElement props are included.

/** When true, the select's dropdown is open. */
export let open = false;

/** The value of the selected item.*/
export let selectedValue: string | undefined = undefined;

/** Additional class names to apply. */
export let variant: string = '';

/** Additional class names to apply to the List*/
export let listVariant: string = '';

Events

HTMLDivElement events are included.

dispatch('pending', { value });
dispatch('select', { value });

Methods

HTMLDivElement blur, click, and focus methods are included.

function scrollToSelectedItem();

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 variant={`composed ${listVariant}`}>
        <!-- Items to display in the dropdown -->
        <slot {variant} {listVariant} />
      </List>
    </div>
  </Popover>
</div>

Playground