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
Multi Select Table of Contents Multi 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 a more compact layout.booleanfalsedescription descriptionSets a supplementary description displayed below the label to provide additional context.string''disabled disabledDisables the multi-select, preventing all interaction. Selected values are not submitted with the form.booleanfalsedropdownDirection dropdown-directionControls whether the dropdown opens upward (up) or downward (down), or decides automatically (auto).type MultiSelectDropdownDirection =
'down'
'up'
'auto''auto'form formAssociates the multi-select with a form element by its ID when not directly nested inside it.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 multi-select control.string''message messageSets the validation feedback message displayed below the control when state is success or error.string''name nameSets the name submitted with the form data to identify the selected values on the server.stringundefinedrequired requiredMarks the multi-select as required — form submission is blocked unless at least one option is selected.booleanfalsestate stateSets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).type MultiSelectState =
'none'
'error'
'success''none'value valueThe selected values. Matches options strictly by type and value, meaning a string value only matches options whose value is the same string, a number value only matches options whose value is the same number. Pass null or [] to clear the selection. 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 number-typed options. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), number[] types are preserved end-to-end.'array(AllowedTypes.string)'
'array(AllowedTypes.number)'
'null'[]EventsEventDescriptionTypeblur Emitted when the multi-select loses focus.CustomEvent<void>change Emitted when the user selects or deselects an option, with the updated array of values in the event detail.type MultiSelectChangeEventDetail = {
  name: string;
  value: string[] | number[];
}
CustomEvent<MultiSelectChangeEventDetail>toggle Emitted when the dropdown opens or closes, with the new open state in the event detail.type MultiSelectToggleEventDetail = {
  open: boolean;
}
CustomEvent<MultiSelectToggleEventDetail>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 options display in the button area.<slot> Default slot for the p-multi-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. Multi Select Option PropertiesPropertyAttributeDescriptionTypeDefaultdisabled disabledDisables the option, preventing it from being selected.booleanfalsevalue valueSets the value submitted with the form data when this option is selected in the parent multi-select.string | numberundefinedSlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the option text.
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%