Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Select Table of Contents Select Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultcompact compactReduces the control height and padding for use in dense layouts where vertical space is limited.booleanfalsedescription descriptionSets a supplementary description displayed below the label to give users additional guidance about the select.string''disabled disabledPrevents user interaction with the select and excludes its value from form submissions.booleanfalsedropdownDirection dropdown-directionControls whether the dropdown list opens upward (up) or downward (down), or determines the direction automatically (auto).type SelectDropdownDirection =
'down'
'up'
'auto''auto'filter filterShows a text input inside the dropdown that filters the visible options as the user types. Ignored when the filter slot is used.booleanfalseform formAssociates the select with a form element by its ID when it is not a direct descendant of that form.stringundefinedhideLabel 🛠hide-labelHides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.boolean
BreakpointCustomizable<boolean>falselabel labelSets the visible label text displayed above the select control to identify its purpose.string''message messageSets the validation feedback message displayed below the select when state is success or error.string''name nameSets the name of the control submitted with the form data, identifying the selected value on the server.stringundefinedrequired requiredMarks the select as required so the form cannot be submitted unless a non-empty option is selected.booleanfalsestate stateSets the validation state of the select, which controls its visual appearance and feedback message style (none, success, error).type SelectState =
'none'
'error'
'success''none'value valueThe selected value. Matches an option strictly by type and value, meaning null matches only an option with value null, undefined matches only an option with value undefined (no preselection by default), and string or number only match an option whose value has the same type and equal value. Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.string
number
'null'undefinedEventsEventDescriptionTypeblur Emitted when the select component loses focus, useful for triggering validation on blur.CustomEvent<void>change Emitted when the user selects a different option, carrying the new value in the event detail.type SelectChangeEventDetail = {
  name: string;
  value: string | number | null | undefined;
}
CustomEvent<SelectChangeEventDetail>toggle Emitted when the dropdown list opens or closes, carrying the new isOpen state in the event detail.type SelectToggleEventDetail = {
  open: boolean;
}
CustomEvent<SelectToggleEventDetail>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. Select Option PropertiesPropertyAttributeDescriptionTypeDefaultdisabled disabledPrevents the option from being selected and visually dims it to indicate it is unavailable.booleanfalsevalue valueSets the value submitted with the form data when this option is selected in the parent select control.string
number
'null'undefinedSlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the option content.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%