fc-select

An element to select values from a list

Usage

<script>
   import '@forter/select';
</script>

<fc-select list='["-","foo","bar","zoo","loo","doo","ree","mee","faa","sol","la"]'>
</fc-select>

Examples

<!-- slot and value -->
<fc-select value="coolDog">
   <option value="coolDog">My Cool Dog Properties</option>
   <option value="coolCat">My Cool Cat Properties</option>
   <option value="elseValue">Else text</option>
</fc-select>

Properties

| Property | Attribute | Type | Default | Description | |----------------------------------|----------------------------------|-----------------------|----------|--------------------------------------------------| | activate | | any | | | | clear | | any | | | | close | | any | | | | deactivate | | any | | | | disabled | disabled | boolean | false | If the element is disabled | | dropdownignoreoverflowclipping | dropdownignoreoverflowclipping | boolean | false | If the element should ignore hiding rules such as overflow: hidden on the parent. | | extended | extended | "" \| "width: auto" | | | | flat | flat | boolean | false | Whether the input had no depth or border | | invalid | invalid | boolean | | Whether the input is invalid | | item | | any | | | | label | label | string | | | | list | list | string | | The element text for no data scenario. example: ['foo','bar'] | | loading | loading | boolean | false | If the button is loading | | onOptionHover | | any | | | | optionText | | any | | | | path | | string | | Pre-Defined size | | placeholder | placeholder | string | "Select" | | | required | required | boolean | | If the element is required | | search | | any | | | | select | | any | | | | supportSecondLineOption | supportSecondLineOption | boolean | false | If fc-select should support 2 lines of single option, instead of tooltip | | typing | | any | | | | updatePosition | | any | | | | valid | valid | boolean | | Whether the input is valid | | value | value | string | | Selected value. example: foo | | warning | warning | string | | |

Events

| Event | Description | |--------------|-------------------------------------| | activate | execute when activate a value | | clear | execute when clear list. | | close | execute when close list. | | deactivate | execute when activate a value | | search | execute when searching value | | select | execute when select value from list | | typing | execute when typing |

Slots

| Name | Description | |-------|--------------------------------------------------| | all | title at top of the list. example: <option value="coolDog">My Cool Dog Properties</option><option value="coolCat">My Cool Cat Properties</option><option value="elseValue">Else text</option> |

CSS Custom Properties

| Property | Description | |--------------------------------|---------------------------------| | --fc-select-background-color | background | | --fc-select-border-color | border-color | | --fc-select-border-radius | border-radius | | --fc-select-box-shadow | box-shadow | | --fc-select-color | color | | --fc-select-cursor | cursor | | --fc-select-disabled-color | disabled color. example: gray | | --fc-select-font-family | font-family | | --fc-select-font-size | font-size | | --fc-select-font-weight | font-weight | | --fc-select-outline | outline | | --fc-select-padding | padding |