Dropdown select

Extended from PrimeVue Dropdown

Basic example

Selected: None

Disabled

Hidden label

Selected: None

Options label different from value

You can also pass in an array of objects to the options prop with label and value keys. The label property will be displayed in the dropdown, while the value property will be used as the model value.

Selected: None

No options

No placeholder

Selected: None

Required

Error state

Please select an option from the dropdown.

EsDropdownSelect props

Name
disabled
Type
Boolean
Default
false
Description
When disabled, the dropdown has a gray background and cannot be interacted with.
Name
label
Type
String
Default
Select an option
Description
Text to display above dropdown. When not specified, the label will be hidden and default to "Select an option" for accessibility purposes.
Name
noOptionsText
Type
String
Default
No available options
Description
Placeholder text to display when there are no options to select from.
Name
options
Type
Array
Default
[]
Description
Array of options to display in the dropdown. Can be an array of strings or objects with 'label' and 'value' properties.
Name
placeholder
Type
String
Default
n/a
Description
Text to display inside dropdown when no option is selected.
Name
required
Type
Boolean
Default
false
Description
When true, a red asterisk is displayed next to the label.
Name
state
Type
Boolean | null
Default
null
Description
Specifies the validity of the input. Can be true (success), false (error), or null (default).