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

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

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

  /** Set to `true` to open the list box */
  export let open = false;

  /** Set to `true` to enable the light variant */
  export let light = false;

  /** Set to `true` to disable the list box */
  export let disabled = false;

  /** Set to `true` to indicate an invalid state */
  export let invalid = false;

  /** Specify the invalid state text */
  export let invalidText = "";

  /** Set to `true` to indicate an warning state */
  export let warn = false;

  /** Specify the warning state text */
  export let warnText = "";
</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}
  class:bx--list-box--warning={!invalid && warn}
  {...$$restProps}
  on:keydown
  on:keydown={(e) => {
    if (e.key === "Escape") {
      e.stopPropagation();
    }
  }}
  on:click|preventDefault
>
  <slot />
</div>
{#if invalid}
  <div class:bx--form-requirement={true}>{invalidText}</div>
{/if}
{#if !invalid && warn}
  <div class:bx--form-requirement={true}>{warnText}</div>
{/if}