Select
<sc-select></sc-select>
This component let users create select container.
- Preview
- Code
<sc-select label="Select" placeholder="Select something" search></sc-select><script>document.querySelector('sc-select').choices = [{label: 'Item', value: 'item-1'},{label: 'Item 2', value: 'item-2'}];</script>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| autocomplete | The input's autocomplete attribute. | string | |
| choices | The input's value attribute. | ChoiceItem[] | [] |
| closeOnSelect | boolean | true | |
| disabled | boolean | ||
| help | Some help text for the input. | string | |
| hoist | boolean | false | |
| invalid | This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API. | boolean | false |
| label | The input's label. | string | |
| loading | boolean | ||
| name | The input's name attribute. | string | |
| open | Is this open | boolean | |
| placeholder | Placeholder for no value | string | '' |
| placement | The placement of the dropdown. | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | 'bottom-start' |
| position | "bottom-left" | "bottom-right" | "top-left" | "top-right" | 'bottom-right' | |
| required | boolean | ||
| search | Is search enabled? | boolean | |
| searchPlaceholder | Placeholder for search | string | '' |
| showParentLabel | boolean | true | |
| size | The input's size. | "large" | "medium" | "small" | 'medium' |
| squared | boolean | ||
| squaredBottom | boolean | ||
| squaredLeft | boolean | ||
| squaredRight | boolean | ||
| squaredTop | boolean | ||
| unselect | Can we unselect items. | boolean | true |
| value | The input's value attribute. | string | '' |
Events
| Event | Description | Type |
|---|---|---|
scBlur | Emitted when the control loses focus. | CustomEvent<void> |
scChange | Emitted when the control's value changes. | CustomEvent<ChoiceItem> |
scClose | Emitted whent the components search query changes | CustomEvent<string> |
scFocus | Emitted when the control gains focus. | CustomEvent<void> |
scOpen | Emitted whent the components search query changes | CustomEvent<string> |
scScrollEnd | Emitted when the list scrolls to the end. | CustomEvent<void> |
scSearch | Emitted whent the components search query changes | CustomEvent<string> |
Methods
reportValidity() => Promise<boolean>
setCustomValidity(message: string) => Promise<void>
Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
Shadow Parts
| Part | Description |
|---|---|
base | The elements base wrapper. |
caret | The caret. |
empty | The empty message. |
form-control | The form control wrapper. |
help-text | Help text that describes how to use the input. |
input | The html input element. |
label | The input label. |
menu__base | The menu base. |
panel | Them panel for the dropdown. |
search | |
search___base | The search base wrapper. |
search__form-control | The search form control wrapper. |
search__input | The search input element. |
spinner__base | The spinner base. |
trigger | The trigger for the dropdown. |