Getting Started
Introduction
Installation
Theming
Core Features
Typography
Colors
Spacing
Borders
Grid
Columns
Background
Event Forwarding
Optimize CSS
Components
Accordion
Alert
Autocomplete
Avatar
Badge
Breadcrumb
Button
ButtonGroup
Card
Checkbox
CheckboxGroup
Datepicker
Divider
Dot
Dropdown
Editor
Fieldset
FileUpload
Floating
Icon
Input
Input group
Label
Modal
Navbar
Offcanvas
Pagination
Popover
Progress
Radio
RadioGroup
Ribbon
Select
Sidebar
Stamp
Steps
Slider
Spinner
Status
Switch
Table
Tabs
Textarea
Toast
Tooltip
Form Components
FormAutocomplete
FormCheckbox
FormCheckboxGroup
FormDatePicker
FormEditor
FormFieldset
FormFileUpload
FormInput
FormRadioGroup
FormSelect
FormSlider
FormSwitch
FormTextarea
Examples
Form elements
Form submission
Pricing cards
Pricing table
FAQs
Widgets
Sign in
Sign in with illustration
Sign in with cover
Sign up
Forgot password
Getting Started
Introduction
Installation
Theming
Core Features
Typography
Colors
Spacing
Borders
Grid
Columns
Background
Event Forwarding
Optimize CSS
Components
Accordion
Alert
Autocomplete
Avatar
Badge
Breadcrumb
Button
ButtonGroup
Card
Checkbox
CheckboxGroup
Datepicker
Divider
Dot
Dropdown
Editor
Fieldset
FileUpload
Floating
Icon
Input
Input group
Label
Modal
Navbar
Offcanvas
Pagination
Popover
Progress
Radio
RadioGroup
Ribbon
Select
Sidebar
Stamp
Steps
Slider
Spinner
Status
Switch
Table
Tabs
Textarea
Toast
Tooltip
Form Components
FormAutocomplete
FormCheckbox
FormCheckboxGroup
FormDatePicker
FormEditor
FormFieldset
FormFileUpload
FormInput
FormRadioGroup
FormSelect
FormSlider
FormSwitch
FormTextarea
Examples
Form elements
Form submission
Pricing cards
Pricing table
FAQs
Widgets
Sign in
Sign in with illustration
Sign in with cover
Sign up
Forgot password
Ctrl
+
k
tabler
daisyui
Theme:
tabler
daisyui
FormAutocomplete
FormAutocomplete supports all props and events of
Autocomplete
and also have some additional features
Label
Preview
Source
Label
Apple
Orange
Peach
Banana
Apricot
Label
Apple
Orange
Peach
Banana
Apricot
value:
Disabled
Preview
Source
Label
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Placeholder
Preview
Source
Label
Apple
Orange
Peach
Banana
Apricot
Selected value:
Size
Preview
Source
Label
Apple
Orange
Peach
Banana
Apricot
Label
Apple
Orange
Peach
Banana
Apricot
Label
Apple
Orange
Peach
Banana
Apricot
Selected value:
Complex Items
You can have complex objects as item and you can use
key
prop to extract the data that you need from Autocomplete.
Preview
Source
Label
0 - First Item
1 - Second Item
2 - Third Item
3 - Fourth Item
4 - Fifth Item
value: {"id":"third","value":"Third Item"}
State
You can set the
valid
or
invalid
boolean properties to apply the valid or invalid state to a Autocomplete.
Preview
Source
Label
No result
Label
No result
Label
No result
Create
Preview
Source
Choose item (or create new)
Apple
Orange
Peach
Banana
Apricot
value:
Create Multiple
Preview
Source
Apple
Orange
Peach
Banana
Apricot
value: Apple
Multiple
Preview
Source
Choose multiple fruits
Apple
Orange
Peach
Banana
Apricot
value: Apple
Dismissible
Preview
Source
Choose fruits
Apple
Orange
Peach
Banana
Apricot
value:
Events
Preview
Source
Autocomplete
a
b
c
d
e
f
changed: 0
On Input
Preview
Source
0 items
No result
Hint/Validation Message
You can set a message below of Autocomplete like this
Preview
Source
First Color:
Red
Green
Blue
GHI
Cyan
DEF
Black
ABC
choose your favorite color
invalid:
GHI
Red
Green
Blue
Cyan
DEF
Black
ABC
GHI is not a valid color name.
valid:
Red
Green
Blue
GHI
Cyan
DEF
Black
ABC
This color name is valid.
Custom Object & Item
You can customize options of FormAutocomplete like this:
Preview
Source
Payment method:
PayPal
Master Card
Visa
method_id:
Layout
You can set width of each Form elements in a form using
col
prop.
Preview
Source
First
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Second
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Third
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Fourth
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Submit
Required
You can mark it as a required field like this.
Preview
Source
First Color
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Last Color
Red
Green
Blue
Yellow
Cyan
Magenta
Black
White
Custom Key
Preview
Source
Label
2 - Third Item
0 - First Item
1 - Second Item
3 - Fourth Item
4 - Fifth Item
Label
2 - Third Item
0 - First Item
1 - Second Item
3 - Fourth Item
4 - Fifth Item
value: {"id":"third","value":"Third Item"}
FormCheckbox
On this page
Label
Disabled
Placeholder
Size
Complex Items
State
Create
Create Multiple
Multiple
Dismissible
Events
On Input
Hint/Validation Message
Custom Object & Item
Layout
Required
Custom Key
© 2025 YeSvelte. All Rights Reserved
Source code
Documentation