Select

A Select component to select values from a list of options.

Examples

Basic

Basic Select usage examples

View Code

<Select
  bind:value="{selected1}"
  style="{{ width: 120 }}"
  on:change="{onChange}"
  class="my-select-wrapper"
  dropdownClass="my-dropdown">
  <Option value="jack" label="Jack" />
  <Option value="lucy" label="Lucy" />
  <Option value="disabled" label="Disabled" disabled />
  <Option value="Yiminghe" label="yiminghe" />
</Select>

<Select bind:value="{selected2}" style="{{ width: 120 }}" disabled>
  <Option value="lucy" label="Lucy" />
</Select>

<br />

<Select bind:value="{selected3}" style="{{ width: 120 }}" loading>
  <Option value="lucy" label="Lucy" />
</Select>

<Select
  bind:value="{selected4}"
  style="{{ width: 120 }}"
  dropdownStyle="{{ width: 100 }}"
  clearable>
  <Option value="lucy" label="Lucy" />
</Select>

<script>
  import { Select, Option } from "svant";

  let selected1 = "lucy";
  let selected2 = "lucy";
  let selected3 = "lucy";
  let selected4 = "lucy";

  const onChange = event => {
    // Note: the value can also be fetched from `event.detail.value`
    console.log(`Selected: ${selected1}`);
  };
</script>

Search Field

Use the searchable prop to search the options while the Select is expanded. By default it will search the label for an exact match, but a searchFunction can be passed for customizing the search.

Select a person

View Code

<Select
  bind:value
  searchable
  {searchFunction}
  style="{{ width: 200 }}"
  placeholder="Select a person"
  on:focus="{onFocus}"
  on:blur="{onBlur}"
  on:search="{onSearch}">
  <Option value="jack" label="Jack" />
  <Option value="lucy" label="Lucy" />
  <Option value="tom" label="Tom" />
</Select>

<script>
  import { Select, Option } from "svant";

  let value = "";

  function onBlur() {
    console.log("blur");
  }

  function onFocus() {
    console.log("focus");
  }

  function onSearch(val) {
    console.log("search:", val);
  }

  function searchFunction(searchInput, option) {
    // option has a value and a label. For example { value: 'lucy', label: 'Lucy' }
    const label = option.label.toLowerCase();
    return label.indexOf(searchInput.toLowerCase()) >= 0;
  }
</script>

Multiple Select

Show more than one selection using multiple mode. Multiple mode is searchable as well.

Please select

View Code

<Select
  mode="multiple"
  style="{{ width: 300 }}"
  placeholder="Please select"
  bind:value
  on:change="{handleChange}"
  maxTagDisplayCount="{3}">
  {#each options as option (option.value)}
    <Option value="{option.value}" label="{option.label}" />
  {/each}
</Select>

<script>
  import { Select, Option } from "svant";

  const options = [];
  for (let i = 10; i < 36; i++) {
    const value = i.toString(36) + i;
    options.push({ value, label: value });
  }

  let value = ["a10", "c12"];

  function handleChange() {
    console.log(`selected ${value}`);
  }
</script>

Sizes

The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.

Large Default Small

Please select

Please Select

View Code

<RadioGroup bind:value="{size}">
  <RadioButton value="large">Large</RadioButton>
  <RadioButton value="default">Default</RadioButton>
  <RadioButton value="small">Small</RadioButton>
</RadioGroup>

<br />

<Select {size} bind:value="{value1}" style="{{ width: 200, marginTop: 20 }}">
  {#each options as option (option.value)}
    <Option value="{option.value}" label="{option.label}" />
  {/each}
</Select>

<br />

<Select
  {size}
  mode="multiple"
  style="{{ width: 400 }}"
  placeholder="Please select"
  bind:value="{value2}">
  {#each options as option (option.value)}
    <Option value="{option.value}" label="{option.label}" />
  {/each}
</Select>

<br />

<Select
  {size}
  mode="tags"
  style="{{ width: 400 }}"
  placeholder="Please Select"
  bind:value="{value3}">
  {#each options as option (option.value)}
    <Option value="{option.value}" label="{option.label}" />
  {/each}
</Select>

<script>
  import { Select, Option, RadioGroup, RadioButton } from "svant";

  let size = "default";

  const options = [];
  for (let i = 10; i < 36; i++) {
    const value = i.toString(36) + i;
    options.push({ value, label: value });
  }

  let value1 = "a10";
  let value2 = ["a10", "c12"];
  let value3 = ["a10", "c12"];
</script>

Custom Selection Display

Custom content can be displayed for each option inside the dropdown.

Select a country

View Code

<Select
  mode="multiple"
  bind:value
  style="{{ width: 300 }}"
  placeholder="Select a country"
  on:change="{onChange}">
  <Option value="china" label="China">🇨🇳 China</Option>
  <Option value="usa" label="USA">🇺🇸 USA</Option>
  <Option value="kosovo" label="Kosovo">🇽🇰 Kosovo</Option>
  <Option value="england" label="England">🏴󠁧󠁢󠁥󠁮󠁧󠁿 England</Option>
</Select>

<script>
  import { Select, Option } from "svant";

  let value = ["usa", "kosovo"];

  const onChange = () => {
    console.log(`Selected: ${value}`);
  };
</script>

Option Groups

Options can be organized in groups within the dropdown.

View Code

<Select bind:value style="{{ width: 200 }}">
  <OptionGroup label="Manager">
    <Option value="jack" label="Jack" />
    <Option value="lucy" label="Lucy" />
  </OptionGroup>
  <OptionGroup label="Engineer">
    <Option value="yiminghe" label="Yiminghe" />
  </OptionGroup>
</Select>

<script>
  import { Select, Option, OptionGroup } from "svant";

  let value = "lucy";
</script>

Remote Search

An example of using the search event to fetch options from an external source.

Search for Star Wars Characters

View Code

<Select
  bind:value
  searchable
  {searchFunction}
  placeholder="Search for Star Wars Characters"
  style="{{ width: 275 }}"
  on:search="{searchForStarWarsPeople}"
  {showEmptyMessage}
  {loading}>
  {#each options as option (option)}
    <Option value="{option}" label="{option}" />
  {/each}
</Select>

<script>
  import { Select, Option } from "svant";

  let value = "";
  let timeout;
  let loading = false;
  let options = [];
  let showEmptyMessage;

  // Set showEmptyMessage explicitly since we are changing options asyncrounously
  // and the component doesn't know to re-render
  $: if (options.length) {
    showEmptyMessage = false;
  } else {
    showEmptyMessage = true;
  }

  function searchFunction(searchInput, option) {
    const value = option.value.toLowerCase();
    return value.indexOf(searchInput.toLowerCase()) >= 0;
  }

  function searchForStarWarsPeople({ detail: searchValue }) {
    loading = true;
    // If the user presses another key before the last search started
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }

    timeout = setTimeout(() => {
      if (typeof fetch) {
        fetch(`https://swapi.dev/api/people/?search=${searchValue}`)
          .then(response => response.json())
          .then(async data => {
            options = data.results.map(result => result.name);
            loading = false;
          });
      }
    }, 1000);
  }
</script>

Custom Dropdown Content

The dropdown can be customized by adding content inside the Select tag.

Custom Dropdown

View Code

<Select
  bind:value="{selectValue}"
  style="{{ width: 250 }}"
  placeholder="Custom Dropdown">
  <Option value="jack" label="Jack" />
  <Option value="lucy" label="Lucy" />
  {#each additionalOptions as option (option.id)}
    <Option value="{option.value}" label="{option.value}" />
  {/each}
  <div class="add-option">
    <Input bind:value="{inputValue}" />
    <Button type="primary" style="{{ marginLeft: 10 }}" on:click="{addOption}">
      <PlusOutlined />
      Add item
    </Button>
  </div>
</Select>

<script>
  import { Select, Option, Input, Button } from "svant";
  import { PlusOutlined } from "svant/icons";
  import { nanoid } from "nanoid";

  let selectValue = "";
  let inputValue = "";
  let additionalOptions = [];

  function addOption() {
    if (!inputValue) return;
    additionalOptions = [
      ...additionalOptions,
      { value: inputValue, id: nanoid() }
    ];
    inputValue = "";
  }
</script>

<style>
  .add-option {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px;
    margin-top: 8px;
    display: flex;
  }
</style>

Hide Already Selected

Hide already selected options in the dropdown.

Inserted are removed

View Code

<Select
  mode="multiple"
  style="{{ width: 300 }}"
  placeholder="Inserted are removed"
  bind:value>
  {#each filteredOptions as option (option.value)}
    <Option value="{option.value}" label="{option.label}" />
  {/each}
</Select>

<script>
  import { Select, Option } from "svant";

  const OPTIONS = [
    { label: "Apples", value: "apples" },
    { label: "Nails", value: "nails" },
    { label: "Bananas", value: "bananas" },
    { label: "Helicopters", value: "helicopters" }
  ];
  let value = [];
  let filteredOptions;

  $: if (value.length) {
    filteredOptions = OPTIONS.filter(option => !value.includes(option.value));
  } else {
    filteredOptions = [...OPTIONS];
  }
</script>

Borderless

The select can be rendered without borders so it looks like text rather than an input.

View Code

<Select bind:value style="{{ width: 120 }}" borderless>
  <Option value="jack" label="Jack" />
  <Option value="lucy" label="Lucy" />
  <Option value="Yiminghe" label="yiminghe" />
</Select>

<script>
  import { Select, Option } from "svant";
  let value = "lucy";
</script>

Custom Tags

The tags displayed in the Select input in multiple or tags mode can be customized using the tagProps function. It should return the props to be added to the tag (color, icon).

onClick and onClose functions can be added as well.

Please select

View Code

<Select
  mode="multiple"
  style="{{ width: 300 }}"
  placeholder="Please select"
  bind:value
  {tagProps}>
  {#each options as option (option.value)}
    <Option value="{option.value}" label="{option.value}" />
  {/each}
</Select>

<script>
  import { Select, Option } from "svant";

  const options = [
    { value: "gold" },
    { value: "lime" },
    { value: "green" },
    { value: "cyan" }
  ];
  let value = ["gold", "cyan"];

  // Takes the option as an argument. Should return tag props and can include an onClose and onClick functions
  const tagProps = option => {
    return {
      color: option.value,
      onClick: () => {
        console.log(`${option.label} clicked`);
      },
      onClose: () => {
        console.log(`${option.label} option removed`);
      }
    };
  };
</script>

API

Select Attributes

Property	Description	Type	Default
value	The current value of the select. Can be used for 2 way binding: `bind:value`.	String\|Array	-
style	Style string or style object (e.x. `style={{ fontSize: 18 }}`) for the Select wrapper.	String\|Object	-
class	Class name or class object (e.x. `class={{ 'abc':true }}`) for the Select wrapper.	String\|Object	-
dropdownClass	Class name or class object (e.x. `class={{ 'abc':true }}`) for the dropdown.	String\|Object	-
dropdownStyle	Style string or style object (e.x. `style={{ fontSize: 18 }}`) for the dropdown.	String\|Object	-
dropdownHeight	Max height of the dropdown. Overflow will be scrollable	String	256px
disabled	Whether or not the Select is interactive.	Boolean	false
loading	Whether the loading spinner should show.	Boolean	false
clearable	Whether the close icon will show when the Select is hovered on. When clicked it will clear the value.	Boolean	false
autoClearSearchValue	Whether the current search will be cleared on selecting an item. Only applies `when` mode is set to `multiple` or `tags`.	Boolean	true
placeholder	The placeholder to show if there is no value.	String	-
searchable	Whether the select has a search input in single mode to filter the options displayed.	Boolean	false
searchFunction	Custom search function used together with the `searchable` prop. It takes the `searchInput` and the `option` as arguments and will be used to search in place of the default label only search. If the function returns `true` for a given option, it wil be displayed.	Function	function that searches for a matching label
mode	The select mode. Allowed values are `single`, `multiple`, and `tags`. See the examples above for details.	String	single
size	The size of the Select input. Valid values are `small`, `default`, and `large`.	String	default
showEmptyMessage	Whether to show the "No options" message in the dropdown when there are no options available.	Boolean	true
borderless	Makes the Select input render with no borders so it looks like plain text with chevron down icon.	Boolean	false
tagProps	A function used in `tags` mode that will render tags with custom props. It takes the option as an argument and should return tag props. It can also include onClose and onClick functions.	Function	-
maxTagDisplayCount	The maximum amount of tags to show in the input when in `multiple` or `tags` mode.	Number	-
maxTagTextLength	The maximum amount of characters for a display tag in `multiple` or `tags` mode. An ellipses will be shown if there are more characters.	Number	-
showArrow	Whether to show the drop-down arrow.	Boolean	true
suffixIcon	Custom icon in place of the arrow in the select input.	SvelteComponent	DownOutlined
clearIcon	Clear icon to use when the Select is clearable and the user hovers over the select.	SvelteComponent	CloseCircleFilled
defaultOpen	Initial open state of the dropdown.	Boolean	false
open	Controlled open state of the dropdown.	Boolean	-

Option Attributes

Property	Description	Type	Default
value	Value of the option.	String	-
label	Label of the option	String	-
disabled	Disabled state of the option	Boolean	false

OptionGroup Attributes

Property	Description	Type	Default
label	The OptionGroup label	String	-

Select Events

Name	Description
change	The Select's value changed.
blur	The user clicked away from the Select.
focus	The user focused the Select.
search	The user typed a character into the search input.
dropdownvisiblechange	The dropdown is opened or closed.

Slots

Name	Description	Component
default (no name needed)	The default slot for Select expects options, but any custom content can be added in there as well together with the options. See the above "Custom Dropdown Content" section for an example.	Select
no-options	Custom content to display when there are no options. Generally used for when search results come up empty.	Select
default (no name needed)	Custom content to display for the Option inside the dropdown. If no content is put in the default slot, the option will render the label. See the above "Custom Selection Display" section for an example.	Option