Select Table of Contents

• Select
• Select Option

Select# Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultcompact compactDisplays as compact version.booleanfalsedescription descriptionThe description text.string''disabled disabledDisables the select.booleanfalsedropdownDirection dropdown-directionChanges the direction to which the dropdown list appears.type SelectDropdownDirection =
'down'
'up'
'auto''auto'filter filterShows an input in the dropdown allowing options to be filtered. Will be ignored if the filter slot is used.booleanfalseform formThe id of a form element the select should be associated with.stringundefinedhideLabel 🛠hide-labelShow or hide label. For better accessibility it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falselabel labelThe label text.string''message messageThe message styled depending on validation state.string''name nameThe name of the control.stringundefinedrequired requiredA Boolean attribute indicating that an option with a non-empty string value must be selected.booleanfalsestate stateThe validation state.type SelectState =
'none'
'error'
'success''none'theme themeAdapts the select color depending on the theme.type Theme =
'light'
'dark'
'auto''light'value valueThe selected value.stringundefinedEventsEventDescriptionTypeblur Emitted when the select has lost focus.CustomEvent<void>change Emitted when the selection is changed.type SelectChangeEventDetail = {
  name: string;
  value: string;
}
CustomEvent<SelectChangeEventDetail>toggle Emitted when the dropdown is toggled.type SelectToggleEventDetail = {
  open: boolean;
}
CustomEvent<SelectToggleEventDetail>update 🚫deprecated since v3.30.0, will be removed with next major release, use change event instead. Emitted when the selection is changed.type SelectUpdateEventDetail = {
  name: string;
  value: string;
}
CustomEvent<SelectUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="label-after"> Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).<slot name="description"> Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="selected"> Use this slot to provide custom markup for the selected option display in the button area.<slot> Default slot for the `p-select-option` tags.<slot name="options-status"> When implementing a custom filter with the `filter` slot, use this slot for loading, error and no results status.<slot name="message"> Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="filter"> Optional slot for providing a custom `p-input-search` input. When used, the default filter input is replaced and the built-in filter logic is disabled, giving full control over filtering behavior.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto Select Option# PropertiesPropertyAttributeDescriptionTypeDefaultdisabled disabledDisables the option.booleanfalsevalue valueThe option value.stringundefinedSlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the option content.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto