Porsche Design System

Select

The p-select component is a versatile custom form element that enables the selection of a single option.

Many of the properties closely resemble those found in the select-wrapper and other form components (e.g. label, description, state, message, hideLabel, disabled, required & dropdownDirection).

Options are slotted using the p-select-option component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the p-select component (More Info). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the disabled attribute. If the selection isn't required or should be clearable again, you can use an empty p-select-option as default selection (More Info).

Hint: The p-select utilizes the Popover API to render its dropdown on the #top-layer which enables it to be shown correctly even when used e.g. within a scroll container.

Option A

Option B

Option C

Option D

Option E

Option F

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-select name="options" label="Some Label" description="Some description">
  <p-select-option value="a">
    Option A
  </p-select-option>
  <p-select-option value="b">
    Option B
  </p-select-option>
  <p-select-option value="c">
    Option C
  </p-select-option>
  <p-select-option value="d">
    Option D
  </p-select-option>
  <p-select-option value="e">
    Option E
  </p-select-option>
  <p-select-option value="f">
    Option F
  </p-select-option>
</p-select>
<script>

</script>
</body>
</html>