@forter/select

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