# Svelte Select for Svelte 5: setup, behavior, and limits

> Svelte Select is a Svelte 5 component for select, autocomplete, and typeahead interfaces. It supports object and primitive values, filtering, multiple selection, floating lists, snippets, callback props, and form integration, but version 6 requires a Svelte 5 migration.

**rob-balfre/svelte-select** — Svelte Select. A select component for Svelte

- Repository: https://github.com/rob-balfre/svelte-select
- Website: https://svelte-select-examples.vercel.app
- Stars: 1,351 · Forks: 190
- Language: JavaScript
- License: NOASSERTION
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/rob-balfre-svelte-select

## Why Svelte Select exists in a Svelte 5 application

Svelte Select addresses the difference between a conventional dropdown and a text-driven selection control. Its default `searchable` value is `true`, while `filterText` supplies the text used to filter `items`. That makes the component relevant to product builders who need typeahead behavior, searchable lists, multiple selection, or object-backed records rather than a fixed set of native option elements.

The target audience is developers building Svelte 5 interfaces. Version 6 declares `svelte` as a peer dependency of `>=5`. Its implementation uses runes, callback props instead of `createEventDispatcher`, and snippet props instead of named slots. Applications still based on the event-dispatch and slot conventions used by earlier Svelte releases therefore face a migration decision rather than a drop-in version bump.

The component is deliberately configurable at its boundaries. `items` accepts an array, `value` represents the selection, and `valueMode` determines whether full objects or primitive identifiers are retained. The `itemId` and `label` props override the default object fields, which allows existing application records to be displayed without first converting every record into a component-specific shape. Primitive string items remain primitive values without requiring an `id` setting.

## Filtering, selection, and value flow in Svelte Select

The central data path begins with `items` and `filterText`. Filtering narrows the displayed collection, while the `value` prop represents the selected item or items. The supported binding list includes `value`, `filterText`, `items`, `loading`, `listOpen`, `focused`, `hoverItemIndex`, `container`, and `input`, so application state can remain synchronized with component state without treating the control as an isolated widget.

Selection behavior changes through `multiple`, `valueMode`, and related props. With `multiple` enabled, `value` can contain multiple selected values. `multiFullItemClearable` changes how selected items behave when clicked, while `closeListOnChange` controls whether the list closes after `onchange`. `clearable` is enabled by default. For multiple mode, `placeholderAlwaysShow` determines whether placeholder text remains visible rather than being replaced entirely by the current selection.

List positioning is based on `floating-ui`. The `listOffset` prop defaults to `5` pixels of space between the select and its list, and `floatingConfig` accepts a Floating UI configuration object. The README calls out Rollup and low-build or no-build environments specifically, directing users to Floating UI package entry-point documentation if build errors occur. This is a meaningful deployment constraint for applications that do not use the Vite toolchain assumed by the repository's own development setup.

## Installing svelte-select and beginning customization

The documented installation command adds `svelte-select` through npm:

```bash
npm install svelte-select
```

After installation, the component requires Svelte 5 or later. The repository does not document a separate runtime setup command for consuming applications. For a first interactive reference, the README links to Svelte REPL examples for a simple select and a more extensive configuration. The examples site also demonstrates props, callbacks, and snippets.

Snippet props are the first visible customization point in the README. For example, this code replaces or extends regions of the generated component:

```svelte
<Select {items}>
  {#snippet prepend()}{/snippet}
  {#snippet selection({ selection, index })}{/snippet}
  {#snippet clearIcon()}{/snippet}
  {#snippet loadingIcon()}{/snippet}
  {#snippet chevronIcon({ listOpen })} {/snippet}
  {#snippet item({ item, index })}{/snippet}
  {#snippet empty()}{/snippet}
  {#snippet requiredIndicator({ value })}{/snippet}
</Select>
```

The snippet names are camelCase in v6. Kebab-case slot names from v4 map to those names, so `clear-icon`, for example, becomes `clearIcon`. The `index` value shown for `selection` is only available when `multiple` is enabled. This customization model lets an application retain the component's selection behavior while replacing its visible controls or item rows.

## Forms, asynchronous loading, and accessibility-facing props

Svelte Select includes props intended for forms and loading states. The `name` prop adds a name to the hidden input, which the README describes as helpful for form actions. Setting `required` can restrict form submission when the `Select` is inside a form. The `requiredIndicator` snippet can provide a custom required marker, while `hasError` applies the component's error class and styles. These features cover common form presentation needs.

The `loading` prop displays `loadingIcon`, but `loadOptions` overrides `loading`. `debounceWait` defaults to `300` milliseconds, and the component includes `filterText` as bound state. These options support interfaces that fetch or otherwise replace option collections, but the available excerpt does not state the full `loadOptions` callback signature or define cancellation and race-condition behavior. An engineer should inspect the callback documentation and test overlapping requests before relying on a particular remote-data policy.

For focus and presentation, `focused`, `disabled`, `id`, `inputAttributes`, `listAutoWidth`, and `containerStyles` expose component state or styling points. `showChevron` defaults to `false`, `placeholder` defaults to `Please select`, and `hideEmptyState` controls whether an empty result list is displayed. The `list` snippet receives `filteredItems`, while `item` receives `{ item, index }`. These hooks make it possible to change rendering, but they also mean customization can affect behavior if the application replaces regions without preserving expected state transitions.

## Svelte Select version 6 compatibility and upgrade cost

The most concrete adoption constraint is the Svelte 5 requirement. The README identifies three changes introduced for v6: runes, callback props instead of `createEventDispatcher`, and snippets instead of named slots. It directs upgrading users to `MIGRATION_GUIDE.md`. Existing customization written with v4 kebab-case slot names will need to be reviewed even where the visual region has an equivalent v6 snippet.

The repository contains a `CHANGELOG.md`, `MIGRATION_GUIDE.md`, and a `.changeset/` directory. Its `package.json` defines `changeset:version` and `changeset:publish` scripts, indicating that release changes are managed through Changesets. The latest listed release is `v6.0.0`, dated 2026-08-11. The last repository push was also on 2026-08-11, and the repository is not archived. These facts confirm a recent release and push, but they do not document the size of the migration for a particular application.

The project uses a custom license identified as `Other`, with the details located in the `LICENSE` file. The README excerpt does not summarize redistribution, attribution, or modification terms. Package consumers therefore need to inspect that file directly before choosing a distribution model. This is a licensing check, not legal advice.

## When a native select is the better control

A native HTML `select` is the practical alternative when the option set is short, fixed, and does not need text filtering. The browser control represents options directly and avoids adding a component that has its own binding model, floating list, snippets, and compatibility boundary. It is also easier to fit into a form that already relies on conventional select submission and browser behavior.

Svelte Select becomes the more relevant choice when the interface needs `filterText`, a large searchable collection, multiple selection, custom item labels, loading states, or application-defined rendering through snippets. Its object support is particularly useful when each option is a record and `itemId` and `label` can map existing fields. The trade-off is integration work: v6 requires Svelte 5 conventions, and floating-list packaging may need attention in Rollup or low-build environments.

It is a poor fit when the project cannot adopt Svelte 5, when a native select is sufficient, or when the application expects complete documentation for remote loading and validation from the component alone. The README excerpt does not document a server-side pagination contract, a rollback procedure for a failed form submission, or a complete accessibility conformance claim. Those boundaries matter for applications with complex data sources or formal accessibility requirements.

## Conclusion

Svelte Select is appropriate for Svelte 5 applications that need searchable or asynchronous-style selection, object labels, multiple values, or custom list rendering. A native select is simpler for a short fixed set of options. Before adoption, verify the custom LICENSE requirements, confirm that the application can meet the `svelte >=5` peer dependency, and test the exact filtering, form, and snippet behavior needed by the interface.

## FAQ

### What Svelte version does svelte-select v6 require?

Svelte Select v6 requires Svelte 5 or later. The package declares `svelte` as a peer dependency of `>=5`.

### How do I install svelte-select?

Run `npm install svelte-select` in the Svelte application. The README also links to Svelte REPL examples and a hosted examples site for exploring the component.

### How are Svelte slots changed in svelte-select v6?

V6 uses snippet props instead of named slots. Kebab-case slot names from v4 map to camelCase snippets, such as `clear-icon` becoming `clearIcon`, and the `required` slot is named `requiredIndicator`.

## Sources

- [Issues](https://github.com/rob-balfre/svelte-select/issues)
- [Project website](https://svelte-select-examples.vercel.app)
- [README](https://github.com/rob-balfre/svelte-select/blob/master/README.md)
- [Releases](https://github.com/rob-balfre/svelte-select/releases)
- [rob-balfre/svelte-select on GitHub](https://github.com/rob-balfre/svelte-select)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/rob-balfre-svelte-select