Svelte Selectbox

david-ding

A simple svelte selectbox library with custom dropdown placements

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

Top categories