Dropdown select

Extended from PrimeVue Dropdown

Basic example

Select a fruit

Selected: None

Disabled

Disabled dropdown

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.

Select your continent

Selected: None

No options

No placeholder

Select a size

Selected: None

Required

Select a fruit *

Error state

Select a tropical fruit * 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).