Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Form
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Form

Select

The <salla-select> web component is used to allow selection from a particular dropdown list, which can be an item's color, size, and so on. The component can be customized using the properties' parameters available.

Example#

Select

Usage#

HTML
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
Auto CompleteautocompleteEnables multiple item selection.booleanfalse
Auto FocusautofocusEnables autofocus.booleanfalse
ChipschipsChanges display of selections to chips.booleanfalse
Clear Iconclear-iconApplies when using clearable and the input is filled.string'sicon-cancel'
ClearableclearableAdds input clear functionality.booleanfalse
ColorcolorApplies specified color to the control."danger" | "dark" | "gray" | "light" | "primary" | "success" | "warning"'primary'
DisableddisabledDisable the input.booleanfalse
FlatflatRemoves elevation or box shadow.booleanundefined
Hide Detailhide-detailHides hint if any.booleanfalse
HinthintAdds hint text.stringundefined
Item Disableditem-disabledSets property of items’s disabled value.string'disabled'
Item Textitem-textSets property of items’s text value.string"text"
Item Valueitem-valueSets property of items’s value - must be primitive. Dot notation is supported.string"value"
Items--Can be an array of objects or array of strings. When using objects, it will look for a text, value and disabled keys.any[][]
LabellabelSets label value.stringundefined
LoadingloadingDisplays linear progress bar.booleanfalse
Loading Colorloading-colorSpecifies which color is applied to the progress bar.string'primary'
MultiplemultipleEnables multiple item selection.booleanfalse
Persist Hintpersist-hintForces hint to always be visible.booleanfalse
PlaceholderplaceholderSets the input’s placeholder text.stringundefined
RequiredrequiredEnables multiple item selection.booleanfalse
Return Objectreturn-objectChanges the selection behavior to return the object directly, rather than the value specified with item-value.booleanfalse
ShapeshapeDefines the appearance of the component."outlined" | "underline"'outlined'
SizesizeAvailable sizing options."large" | "normal" | "small" | "x-large" | "x-small"'normal'
ValuevalueThe selected value.anyundefined
Previous
Quantity Input
Next
Tel Input