Autocomplete

Autocomplete is used to search and pick a value from a list of options.

Usage

svelte

import { Autocomplete } from 'stwui';
// OR
import Autocomplete from 'stwui/autocomplete'; // for tree shaking

Basic

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;
   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	function handleChange(event: Event) {
		const target = event.target as HTMLSelectElement;
		console.log('event', target.value);
	}

	$: filterOptions(value);
</script>

<Autocomplete
	name="autocomplete"
	placeholder="Basic"
	bind:value={value}
	on:input={filter}
	on:change={handleChange}
	{options}
>
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

With Label

Label

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;
   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;

	function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);
</script>

<Autocomplete
	name="autocomplete"
	placeholder="Basic"
	bind:value={value}
	on:input={filter}
	{options}
>
	<Autocomplete.Label slot="label">Label</Autocomplete.Label>
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

With Leading

Label

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;
   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;
	let email = 'svg-path';

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);
</script>

<Autocomplete
	name="autocomplete"
	bind:value={value}
	on:input={filter}
	{options}
>
	<Autocomplete.Label slot="label">Label</Autocomplete.Label>
	<Autocomplete.Leading slot="leading" data={email} />
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

With Error

Label

You're doing it wrong!

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;
   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;
	let email = 'svg-path';

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);

	let error: string | undefined = "You're doing it wrong!";
	$: if (value && value.length > 0) {
		error = undefined;
	} else {
		error = "You're doing it wrong!";
	}
</script>

<Autocomplete
	name="autocomplete"
	bind:value={value}
	on:input={filter}
	{options}
	{error}
>
	<Autocomplete.Label slot="label">Label</Autocomplete.Label>
	<Autocomplete.Leading slot="leading" data={email} />
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

Disabled

Label

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;
   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;
	let email = 'svg-path';

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);
</script>

<Autocomplete
	name="autocomplete"
	bind:value={value}
	on:input={filter}
	{options}
	disabled
>
	<Autocomplete.Label slot="label">Label</Autocomplete.Label>
	<Autocomplete.Leading slot="leading" data={email} />
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

With Any Value

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value = 'I am not in the list!';

   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);
</script>

<Autocomplete
	name="autocomplete"
	placeholder="Basic"
	bind:value={value}
	on:input={filter}
	allowNonListValue
>
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

With Mobile

Label

svelte

<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;
   let options = [
		{
			label: 'Option 1',
			value: 'option_1'
		},
		{
			label: 'Option 2',
			value: 'option_2'
		},
		{
			label: 'Option 3',
			value: 'option_3'
		},
		{
			label: 'Option 4',
			value: 'option_4'
		},
		{
			label: 'Option 5',
			value: 'option_5'
		},
		{
			label: 'Option 6',
			value: 'option_6'
		},
		{
			label: 'Option 7',
			value: 'option_7'
		}
	];
	let filtered = options;

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.value.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(newValue: string) {
      if (newValue) {
         filtered = options.filter((opt) => opt.value.toLowerCase().includes(newValue.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);
</script>

<Autocomplete
	name="autocomplete"
	placeholder="Basic"
	bind:value={value}
	on:input={filter}
	{options}
	mobile
>
	<Autocomplete.Label slot="label">Label</Autocomplete.Label>
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

Autocomplete Props

name	string	nanoid()
error	string
placeholder	string
value	string
allowNonListValue	boolean	false
disabled	boolean	false
options	string[]	[]
mobile	boolean	false
optionLabel	string	label
optionValue	string	value
options	SelectOption[]
on:change	(e: Event) => void
on:input	(e: Event) => void

Autocomplete Slots

label	<Autocomplete.Label slot="label" />
leading	<Autocomplete.Leading slot="leading" />
options	<Autocomplete.Options slot="options" />

Autocomplete.Label Slots

default

Autocomplete.Leading Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

Autocomplete.Options Slots

default	<Autocomplete.Options.Option />
default	<Autocomplete.Options.EmptyOption />

Autocomplete.Options.Option Props

option

string

Autocomplete.Options.EmptyOption Slots

default

Autocomplete Class Identifiers

stwi-autocomplete

stwui-autocomplete-wrapper

stwui-autocomplete-trigger

stwui-autocomplete-input

stwui-autocomplete-leading

stwui-autocomplete-clear-wrapper

stwui-autocomplete-error-wrapper

stwui-autocomplete-mobile-drawer

stwui-autocomplete-mobile-input

stwui-autocomplete-mobile-options

stwui-autocomplete-error

stwui-autocomplete-empty-option

stwui-autocomplete-label

stwui-autocomplete-option

stwui-autocomplete-options

GET STARTED

COMPONENTS

ACTIONS

UTILITIES

TYPES

Autocomplete

Usage

Basic

With Label

With Leading

With Error

Disabled

With Any Value

With Mobile

Autocomplete Props

Autocomplete Slots

Autocomplete.Label Slots

Autocomplete.Leading Props

Autocomplete.Options Slots

Autocomplete.Options.Option Props

Autocomplete.Options.EmptyOption Slots

Autocomplete Class Identifiers