Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

svelte-select

Package Overview
Dependencies
Maintainers
1
Versions
196
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-select

A <Select> component for Svelte apps

  • 3.1.2
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

svelte-select

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

Demos

🌱 Simple demo

🌻 Advanced demo

Installation

yarn add svelte-select

Note: Install as a dev dependency (yarn add svelte-select --dev) if using Sapper to avoid a SSR error.

Usage

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

  let items = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'pizza', label: 'Pizza'},
    {value: 'cake', label: 'Cake'},
    {value: 'chips', label: 'Chips'},
    {value: 'ice-cream', label: 'Ice Cream'},
  ];
  
  let selectedValue = undefined;
</script>

<Select {items} bind:selectedValue></Select>

API

PropTypeDefaultDescription
itemsString-Array of items
filterTextString-Text to filter list labels by
placeholderString-Placeholder text
optionIdentifierString'value'Override default identifier
listOpenBooleanfalseOpen/close list
containerStylesString-Add/override container styles
selectedValue--Selected value(s)
isClearableBooleantrueEnable clearing selected items
isCreatableBooleanfalseEnable creating selected items
isDisabledBooleanfalseDisable select
isMultiBooleanfalseEnable multi select
isSearchableBooleantrueDisable search/filtering
isVirtualListBooleanfalseUses svelte-virtual-list to render list (experimental)
groupByFunction-Function to group list items
groupFilterFunction(groups) => groupsGroup filter function
isGroupHeaderSelectableBooleanfalseEnable selectable group headers
createGroupHeaderItemFunction(groupValue) => { label:groupValue, value:groupValue }create item for group headers
createItemFunction(filterText) => { label:filterText, value:filterText }create item function
getOptionLabelFunction(option, filterText) => option.isCreator ? `Create "${filterText}"` : option.labelGet option label function
getSelectionLabelFunction(option) => option.labelGet selection label function
getGroupHeaderLabelFunction(option) => option.labelGet group header label function
handleClearFunction-Clears selection, closes list and dispatches event
ItemComponentItemItem component
SelectionComponentSelectionSelection component
MultiSelectionComponentMultiSelectionMulti selection component
loadOptionsPromise-Method that returns a Promise that updates items
noOptionsMessageString'No options'Message to display when there are no items
hideEmptyStateBooleanfalseHide list when no options
menuPlacementString'auto'When 'auto' displays either 'top' or 'bottom' depending on viewport
hasErrorBooleanfalseShow error styles around select input (red border)
inputAttributesObject-Pass in attributes like 'id' to the Select input, for example {id: 'Food Selection', foo: 'something'}
listAutoWidthBooleantrueList width will grow wider than the Select container (depending on list item content length)

Styling

You can style a component by overriding the available CSS variables.

<script>
  import Select from 'svelte-select';
  
  const items = ['One', 'Two', 'Three'];
</script>

<style>
  .themed {
    --border: 3px solid blue;
    --borderRadius: 10px;
    --placeholderColor: blue;
  }
</style>

<div class="themed">
  <h2>Theming</h2>
  <Select {items}></Select>  
</div>

Events

Event NameCallbackDescription
selectselectedValuefires when selectedValue changes
clear-fires when clear all is invoked
<script>
  import Select from 'svelte-select';

  let items = [...];
  function handleSelect(selectedVal) {
    ...
  }
  function onClear() {
    ...
  }
</script>

<Select {items} on:select={handleSelect} on:clear={handleClear}></Select>

Development

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

In your favourite browser go to http://localhost:3000 and open devtools and see the console for the test output. When developing its handy to see the component on the page; comment out the select.$destroy(); on the last test in /test/src/index.js or use the test.only() to target just one test.

For example:

test.only('when getSelectionLabel contains HTML then render the HTML', async (t) => {
  const select = new Select({
    target,
    props: {
      selectedValue: items[0],
      getSelectionLabel: (option) => `<p>${option.label}</p>`,
    }
  });

  t.ok(document.querySelector('.selection').innerHTML === '<p>Chocolate</p>');

  //select.$destroy();
});

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

Keywords

FAQs

Package last updated on 20 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc