Porsche Design System

Select Wrapper 🚫

The p-select-wrapper component is a styling wrapper for the native HTML <select> form element. To improve accessibility on devices with touch support, it defaults to the native user interface behaviour.

This component is deprecated and will be removed with the next major release. Please use p-select instead.

A label is a caption which informs the user what information a particular form field is asking for. The p-select-wrapper component can be used with or without a label but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's best practice to provide a descriptive label text for screen readers.

Open in Stackblitz

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

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

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

Deprecation hint