svelte-select

svelte-select (demo)

A select/autocomplete component for Svelte apps. With support for grouping, filtering, async and more.

Installation

yarn add svelte-select

Usage

<Select {items}></Select>

<script>
  import Select from 'svelte-select';

  export default {
    components: { Select },

    data() {
      return {
         items: [
          {value: 'chocolate', label: 'Chocolate'},
          {value: 'pizza', label: 'Pizza'},
          {value: 'cake', label: 'Cake'},
          {value: 'chips', label: 'Chips'},
          {value: 'ice-cream', label: 'Ice Cream'},
        ]
      };
    }
  };
</script>

API

• items - array of items
• filterText - text to filter list labels by
• placeholder - placeholder text
• optionIdentifier - Override default identifier ('value')
• listOpen - open/close list
• containerStyles - add/override container styles
• selectedValue - Selected value(s)
• groupBy - Function to group list items
• isClearable - Defaults true set to false to disable clear all
• isDisabled - Disable select
• isMulti - Enable multi select
• isSearchable - Defaults true set to false to disable search/filtering
• groupFilter - Override default groupFilter function
• getOptionLabel - Override default getOptionLabel function
• Item - Override default item component
• Selection - Override default selection component
• MultiSelection - Override default multi selection component
• getOptions - Methods that returns a Promise that updates items
• noOptionsMessage - Message to display when there are no items

Development

yarn global add serve@8
yarn
yarn dev
yarn test:browser

Configuring webpack

If you're using webpack with svelte-loader, make sure that you add "svelte" to resolve.mainFields in your webpack config. This ensures that webpack imports the uncompiled component (src/index.html) rather than the compiled version (index.mjs) — this is more efficient.

If you're using Rollup with rollup-plugin-svelte, this will happen automatically.

License

LIL

Changelog

1.2.0

• Updated README
• Added Async (loadOptions)
• Added noOptionsMessage
• Bug fixes
• Updated examples