Light Mode
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
Usage
<!-- Basic Select component usage -->
<salla-select
color="primary"
autocomplete="true"
size="large">
</salla-select>
.s-select-label {
display: block;
margin-bottom: 0.5rem;
color: #111827;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
}
.s-select-underline {
display: block;
padding-left: 0;
padding-right: 0;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
background-color: transparent;
color: #6B7280;
font-size: 0.875rem;
line-height: 1.25rem;
width: 100%;
border-width: 0;
border-bottom-width: 2px;
border-color: #E5E7EB;
appearance: none;
}
.s-select-outlined {
display: block;
padding: 0.625rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
background-color: #F9FAFB;
color: #111827;
font-size: 0.875rem;
line-height: 1.25rem;
width: 100%;
border-radius: 0.5rem;
border-width: 1px;
border-color: #D1D5DB;
}
.s-select-x-large {
height: 5rem;
}
.s-select-large {
height: 4rem;
}
.s-select-normal {
height: 3rem;
}
.s-select-small {
height: 3rem;
}
.s-select-x-small {
height: 2.5rem;
}
.s-select-field {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
margin: 0;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 400;
line-height: 1.75rem;
width: 100%;
border-radius: 0.375rem;
border-color: #9CA3AF;
box-shadow: none;
}
.s-select-hint {
margin-top: 0.25rem;
color: #374151;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 1.25rem;
}
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
Auto Complete | autocomplete |
Enables multiple item selection. | boolean |
false |
Auto Focus | autofocus |
Enables autofocus . |
boolean |
false |
Chips | chips |
Changes display of selections to chips . |
boolean |
false |
Clear Icon | clear-icon |
Applies when using clearable and the input is filled. |
string |
'sicon-cancel' |
Clearable | clearable |
Adds input clear functionality. | boolean |
false |
Color | color |
Applies specified color to the control. | "danger" | "dark" | "gray" | "light" | "primary" | "success" | "warning" |
'primary' |
Disabled | disabled |
Disable the input. | boolean |
false |
Flat | flat |
Removes elevation or box shadow. | boolean |
undefined |
Hide Detail | hide-detail |
Hides hint if any. |
boolean |
false |
Hint | hint |
Adds hint text. | string |
undefined |
Item Disabled | item-disabled |
Sets property of items’s disabled value. | string |
'disabled' |
Item Text | item-text |
Sets property of items’s text value. | string |
"text" |
Item Value | item-value |
Sets 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[] |
[] |
Label | label |
Sets label value. | string |
undefined |
Loading | loading |
Displays linear progress bar. | boolean |
false |
Loading Color | loading-color |
Specifies which color is applied to the progress bar. | string |
'primary' |
Multiple | multiple |
Enables multiple item selection. | boolean |
false |
Persist Hint | persist-hint |
Forces hint to always be visible. | boolean |
false |
Placeholder | placeholder |
Sets the input’s placeholder text. | string |
undefined |
Required | required |
Enables multiple item selection. | boolean |
false |
Return Object | return-object |
Changes the selection behavior to return the object directly, rather than the value specified with item-value . |
boolean |
false |
Shape | shape |
Defines the appearance of the component. | "outlined" | "underline" |
'outlined' |
Size | size |
Available sizing options. | "large" | "normal" | "small" | "x-large" | "x-small" |
'normal' |
Value | value |
The selected value. | any |
undefined |
Last modified: 10 months ago