logo-icon
STW UI

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

With Label

With Leading

With Error

You're doing it wrong!

Disabled

With Any Value

With Mobile

Autocomplete Props

name string nanoid()
error string
placeholder string
value string
allowNonListValue boolean false
disabled boolean false
options string[] []
mobile boolean false

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