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.

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>