Ctrl + k
Theme:

FormAutocomplete

FormAutocomplete supports all props and events of Autocomplete and also have some additional features

Apple
Orange
Peach
Banana
Apricot
Apple
Orange
Peach
Banana
Apricot
value: undefined

Red
Green
Blue
Yellow
Cyan
Magenta
Black
White

Apple
Orange
Peach
Banana
Apricot
Selected value: undefined

Apple
Orange
Peach
Banana
Apricot
Apple
Orange
Peach
Banana
Apricot
Apple
Orange
Peach
Banana
Apricot
Selected value: undefined

You can have complex objects as item and you can use key prop to extract the data that you need from Autocomplete.

2 - Third Item
0 - First Item
1 - Second Item
2 - Fourth Item
3 - Fifth Item
value: {"id":"third","value":"Third Item"}

You can set the valid or invalid boolean properties to apply the valid or invalid state to a Autocomplete.

No result
No result
No result

Apple
Orange
Peach
Banana
Apricot
value:

Apple
Orange
Peach
Banana
Apricot
value: Apple

Apple
Orange
Peach
Banana
Apricot
value: Apple

Apple
Orange
Peach
Banana
Apricot
value:

a
b
c
d
e
f
changed: 0

No result

You can set a message below of Autocomplete like this

Red
Green
Blue
GHI
Cyan
DEF
Black
ABC
choose your favorite color
GHI
Red
Green
Blue
Cyan
DEF
Black
ABC
GHI is not a valid color name.
Red
Green
Blue
GHI
Cyan
DEF
Black
ABC
This color name is valid.

You can customize options of FormAutocomplete like this:

PayPal
Master Card
Visa
method_id: undefined

You can set width of each Form elements in a form using col prop.

Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White

You can mark it as a required field like this.

Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White

2 - Third Item
0 - First Item
1 - Second Item
3 - Fourth Item
4 - Fifth Item
2 - Third Item
0 - First Item
1 - Second Item
3 - Fourth Item
4 - Fifth Item
value: {"id":"third","value":"Third Item"}
© 2024 YeSvelte. All Rights Reserved