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
Select
Select component is used to let users choose from a predefined set of options.
Default
Preview
Source
Apple
Orange
Peach
Banana
Apricot
value: Peach
Items
Preview
Source
1 - Apple
2 - Orange
3 - Peach
4 - Banana
5 - Apricot
value: undefined
Key
Preview
Source
1 - Apple
2 - Orange
3 - Peach
4 - Banana
5 - Apricot
1 - Apple
2 - Orange
3 - Peach
4 - Banana
5 - Apricot
value: undefined
Bind Item
Preview
Source
1 - Apple
2 - Orange
3 - Peach
4 - Banana
5 - Apricot
Selected Id: 1 - value: {"name":"Apple","id":"1","type":"Fruit"}
Bind as Object
Preview
Source
1 - Apple
2 - Orange
3 - Peach
4 - Banana
5 - Apricot
value: {"name":"Orange","id":"2","type":"Fruit"}
Placeholder
Preview
Source
Please select an item
Apple
Orange
Peach
Banana
Apricot
Selected value: undefined
Sizes
Preview
Source
Apple
Orange
Peach
Banana
Apricot
Apple
Orange
Peach
Banana
Apricot
Apple
Orange
Peach
Banana
Apricot
Selected value: undefined
Disabled
Preview
Source
Apple
Orange
Peach
Banana
Apricot
Multiple
Preview
Source
Apple
Orange
Peach
Banana
Apricot
values: Peach, Orange
Multiple with Object
Preview
Source
1 - Apple
2 - Orange
3 - Peach
4 - Banana
5 - Apricot
value: []
Events
Preview
Source
Click Me!
clicked: 0
States
Preview
Source
state is not set for this
this is valid state
this is invalid state
Required
Preview
Source
Choose a Language: (required)
HTML
CSS
JS
Svelte
Submit
Dynamic Items
Preview
Source
value: undefined
Ribbon
Sidebar
© 2023 YeSvelte. All Rights Reserved
Source code
Documentation