EnInputSelectPlus

Preview

Props

Name	Description	Default	Control
pills	Styles display value as pills. boolean	false	truefalse
filter	Adds a text filter to the options dropdown for long lists. boolean	false	truefalse
placeholder	Sets the placeholder value. string	null
multi	Controls whether multiple options can be selected or not. boolean	false	truefalse
buttonStyle	Shows selected options as buttons that can be clicked to clear. boolean	false	truefalse
useButtonDeselect	Shows the selected options as buttons to allow for deselecting. boolean	false	truefalse
hideSelected	Sets component to NOT display list of selected options boolean	false	truefalse
value	Used for a raw value passed into the input. string | number	unknown
name	Sets name attribute for the input. Required for proper form handling. string	null
id	Sets id attribute for input. If left blank, it will default to the name prop. This should always be matched to a label's "for" attribute for proper accessibility. string	null
label	Used to describe field in error message string	null
disabled	Sets the disabled attribute. boolean	null	truefalse
required	Sets the field to required. boolean	false	truefalse
typeCast	Used to specifically validate different types. string	"string"
mode	Sets when and how often validation occurs. TODO: create docs for modes string	"eager"
displayOnly	Displays the value of the field in a span element, instead of as an input. boolean	false	truefalse
rules	A pipe separated string of validation rules for the field. View validation rules string	""
renderInForm	Prevents a field from being rendered at all when used in the fields prop of the EnForm component. Can be passed a function that returns true or false for conditional validation. boolean | function	true	truefalse
renderInTable	Prevents a field from generating a column/heading in the EnTableBasic component. Can be passed a function that returns true or false for conditional validation. boolean | function	true	truefalse
customMessages	Provide a custom error messages by rule. Should be an object with keys that match the rule name and value being a string of the message to display. object	null	complex object
options	Array of option objects with label and value keys. array	unknown	complex object
valueKey	Sets a different key to use to retrieve the value from the options passed to the component. string	"value"
labelKey	Sets a different key to use to retrieve the label from the options passed to the component. string	"label"
labelColors	Sets default colors for option labels in displayOnly mode array	unknown	complex object
optionsKey	Sets a different key to use to retrieve the options from the option groups passed to the component. string	"options"

Slots

display

No description

Variables

Name	Type	Description
selections	unknown	—

option-${option.value}

No description

Variables

Name	Type	Description
name	unknown	—
option	unknown	—

option-{option.value}

Dynamic slot created for each label area of a select option. Can be used to modify the label, add icons, etc.

Variables

Name	Type	Description
option	object	The option object driving the slot.

Events

open

No description

close

No description

input

No description

change

No description

Methods

Name	Description
focus	Focuses the select element.

Types

Option - Object

Properties available when using an input that accepts options.

Name	Type	Description
label	string	Display text for the option. Note: first letter is case insensitive meaning it will also try Label
value	stringnumber	Value of the option that will be emitted when selected. Note: first letter is case insensitive meaning it will also try Value
disabled	boolean	Sets the option to disabled so that it cannot be selected or deselected.
labelColor	string	Overrides the default label color when using pills and display only, if supported.
tooltip	string	Adds a tooltip next to the option if supported by the input (radio, checkbox, boolean).
options	array	Array of Options when needing to use option groups.

Examples

Options and using filter

Multi select with button display

Providing a custom option content using slot