Svelte Selectbox

A simple selectbox library with custom dropdown placements. Demos

Installation

npm

npm i -D svelte-selectbox

yarn

yarn add -D svelte-selectbox

pnpm

pnpm add -D svelte-selectbox

Usage

<script>
  import Select from "svelte-selectbox";

  const options = [
    { value: "Mercury", label: "Mercury" },
    { value: "Venus", label: "Venus" },
    { value: "Earth", label: "Earth" },
    { value: "Mars", label: "Mars" },
    { value: "Jupiter", label: "Jupiter" },
    { value: "Saturn", label: "Saturn" },
    { value: "Uranus", label: "Uranus" },
    { value: "Neptune", label: "Neptune" },
  ];

  let value = "Earth"

  function onSelect(option) {
    console.log(option.data.value);
  }
</script>

<Select {options} bind:value on:select={onSelect} />
<p>{ value } is selected</p>

Props

| Prop | Default | Description | | ------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | appendTo | null | Specify the CSS selector of the container element to attach the dropdown element. | | direction | "auto" | Specify which direction should the dropdown open. Valid values are "auto", "up" or "down". If "auto" is selected, then it will determine the direction based on the viewport. | | disabled | false | Specify if the dropdown is disabled. | | dropdownHeight | null | Specify the height of the dropdown element. An alternative way to specify the dropdown height is to use itemHeight + maxItems. If dropdownHeight is specified, then itemHeight and maxItems values are ignored. "px", "rem" and "em" values are accepted. | | htmlId | null | Specify the id of the underlying input element. | | itemHeight | "3rem" | Specify the height of each dropdown item. This prop in conjunction with maxItems determines the dropdown height. You may also set the dropdown height directly using the dropdownHeight prop. "px", "rem" and "em" values are accepted. | | maxItems | 5 | Specify the maximum number of dropdown items. | | optionKeyFn | (option) => option.label | Function to return a unique identifier of a dropdown item (for optimization purpose). | | options | [] | Specify the available options. e.g. [{ label: 'Item 1', value: 1 }, { label: 'Item 2', value: 2, disabled: true }] | | placeholder | null | Specify the placeholder text when no option is selected. | | searchFn | null | Override the default search function. | | searchable | false | Specify if the dropdown is searchable. | | showChevron | true | Specify if the chevron is shown. | | showEmptyResults | true | Specify if a placeholder is shown if there are no options available. | | value | null | Specify the current value. | | valueFormatterFn | null | Function to return the string value shown in the selector if an option is selected. By default this is the option label. | | yOffset | 1rem | Specify the vertical offset between the dropdown and selector elements. "px", "rem" and "em" values are accepted. |

Slots

Item

Specify the item template.

option - option object of current item

Example:

<div slot="item" let:option>{ `${option.label} (${option.value})` }</div>

Clear Icon

Specify the clear icon template.

Example:

<div slot="clear-icon" style="margin-right: 0.5rem">❌</div>

Chevron Icon

Specify the chevron icon template.

expanded - whether the dropdown is expanded

Example:

<div slot="chevron-icon" let:expanded>{expanded ? "🔺" : "🔻"}</div>

No Option Placeholder

Specify the no option placeholder template.

Example:

<div slot="no-options-placeholder">Nothing to see here...</div>

Value

Specify the selector value template.

formattedValue - the formatted value with valueFormatterFn applied, by default this is the option label

Example:

<div slot="value" let:formattedValue>
  <MyFancyComponent>{formattedValue}</MyFancyComponent>
</div>

Theming

You can style the selectbox with CSS variables.

Example:

<script>
  import Select from "svelte-selectbox";

  const options = [
    { value: "Mercury", label: "Mercury" },
    { value: "Venus", label: "Venus" },
    { value: "Earth", label: "Earth" },
    { value: "Mars", label: "Mars" },
    { value: "Jupiter", label: "Jupiter" },
    { value: "Saturn", label: "Saturn" },
    { value: "Uranus", label: "Uranus" },
    { value: "Neptune", label: "Neptune" },
  ];
</script>

<Select
  {options}
  placeholder="Select..."
  yOffset="-2px"
  --border="2px solid #d8d8d8"
  --border-hover="2px solid #d8d8d8"
  --border-radius="8px"
  --border-radius-expanded="8px 8px 0 0"
  --border-radius-expanded-up="0 0 8px 8px"
  --box-shadow-focused="none"
  --box-shadow-expanded="none"
  --box-shadow-expanded-up="none"
  --border-focused="2px solid #60a5fa"
  --border-expanded="2px solid #60a5fa"
  --color="#6B7280"
  --line-height="2.5rem"
  --dropdown-border-width="0 2px 2px 2px"
  --dropdown-border-color="#60a5fa"
  --dropdown-border-radius="0 0 8px 8px"
  --dropdown-border-width-up="2px 2px 0 2px"
  --dropdown-border-radius-up="8px 8px 0 0"
  --dropdown-item-color="#6B7280"
  --dropdown-item-color-hover="#6B7280"
  --dropdown-box-shadow="none"
  --dropdown-item-border="1px solid #fafafa"
/>

A list of exposed CSS variables are:

• --background-color
• --border
• --border-expanded
• --border-focused
• --border-hover
• --border-radius
• --border-radius-expanded
• --border-radius-expanded-up
• --box-shadow
• --box-shadow-expanded
• --box-shadow-focused
• --box-shadow-hover
• --color
• --cursor
• --disabled-background-color
• --disabled-select-arrow-color
• --disabled-select-value-color
• --dropdown-background-color
• --dropdown-border-color
• --dropdown-border-radius
• --dropdown-border-radius-up
• --dropdown-border-width
• --dropdown-border-width-up
• --dropdown-box-shadow
• --dropdown-font-size
• --dropdown-item-background-highlighted
• --dropdown-item-border
• --dropdown-item-color
• --dropdown-item-color-highlighted
• --dropdown-item-disabled-color
• --dropdown-z-index
• --font-size
• --line-height
• --padding
• --placeholder-color