carbon-components-svelte/src/ListBox/ListBox.svelte

<script>
  /**
   * Set the size of the list box
   * @type {"sm" | "xl"} [size]
   */
  export let size = undefined;

  /**
   * Set the type of the list box
   * @type {"default" | "inline"} [type="default"]
   */
  export let type = "default";

  /**
   * Set to `true` to open the list box
   * @type {boolean} [open=false]
   */
  export let open = false;

  /**
   * Set to `true` to enable the light variant
   * @type {boolean} [light=false]
   */
  export let light = false;

  /**
   * Set to `true` to disable the list box
   * @type {boolean} [disable=false]
   */
  export let disabled = false;

  /**
   * Set to `true` to indicate an invalid state
   * @type {boolean} [invalid=false]
   */
  export let invalid = false;

  /**
   * Specify the invalid state text
   * @type {string} [invalidText=""]
   */
  export let invalidText = "";
</script>

<div
  role="listbox"
  tabindex="-1"
  data-invalid="{invalid || undefined}"
  class:bx--list-box="{true}"
  class:bx--list-box--sm="{size === 'sm'}"
  class:bx--list-box--xl="{size === 'xl'}"
  class:bx--list-box--inline="{type === 'inline'}"
  class:bx--list-box--disabled="{disabled}"
  class:bx--list-box--expanded="{open}"
  class:bx--list-box--light="{light}"
  {...$$restProps}
  on:keydown
  on:keydown="{(e) => {
    if (e.key === 'Escape') {
      e.stopPropagation();
    }
  }}"
  on:click|preventDefault|stopPropagation
>
  <slot />
</div>
{#if invalid}
  <div class:bx--form-requirement="{true}">{invalidText}</div>
{/if}