Select

<section id="select-demo">
<pf-select placeholder="Select a title"
     accessible-label="Title">
  <pf-option>Mr</pf-option>
  <pf-option>Miss</pf-option>
  <pf-option>Mrs</pf-option>
  <pf-option>Ms</pf-option>
  <hr>
  <pf-option>Dr</pf-option>
  <pf-option>Other</pf-option>
</pf-select>
</section>
<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>
<style>
#select-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

<section id="description-demo">
<pf-select accessible-label="Title">
  <pf-option description="This is a description">Mr</pf-option>
  <pf-option description="This is a description">Miss</pf-option>
  <pf-option description="This is a description">Mrs</pf-option>
  <pf-option description="This is a description">Ms</pf-option>
  <pf-option>Dr
    <span slot="description">Descriptions can <em>also</em> be HTML</span>
  </pf-option>
  <pf-option description="This is a description">Other</pf-option>
</pf-select>
</section>
<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>
<style>
#description-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

<section id="grouped-select-demo">
<pf-select accessible-label="Status">
  <pf-option-group label="Status" key="group1">
    <pf-option value="0">Running</pf-option>
    <pf-option value="1">Stopped</pf-option>
    <pf-option value="2">Down</pf-option>
    <pf-option value="3">Degraded</pf-option>
    <pf-option value="4">Needs maintenance</pf-option>
  </pf-option-group>
  <hr>
  <pf-option-group label="Vendor names" key="group2">
    <pf-option value="5">Dell</pf-option>
    <pf-option value="6" disabled>Samsung</pf-option>
    <pf-option value="7">Hewlett-Packard</pf-option>
  </pf-option-group>
</pf-select>
</section>
<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>
<style>
#grouped-select-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

<section id="checkbox-select-demo">
<pf-select variant="checkbox"
   accessible-label="Status"
   placeholder="Filter by status">
  <pf-option description="This is a description">Active</pf-option>
  <pf-option>Cancelled</pf-option>
  <pf-option>Paused</pf-option>
  <hr>
  <pf-option>Warning</pf-option>
  <pf-option>Restarted</pf-option>
</pf-select>
</section>
<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>
<style>
#checkbox-select-demo {
padding: 1em;
max-width: 400px;
}
</style>

<section id="typeahead-demo">
  <label for="state">State</label>
  <pf-select id="state"
   variant="typeahead"
   placeholder="Select a state">
<pf-option value="Alabama"
     description="The heart of Dixie"></pf-option>
<pf-option value="Florida"
     description="The sunshine state"
     disabled></pf-option>
<pf-option value="New Jersey"></pf-option>
<pf-option value="New York"></pf-option>
<pf-option value="New Mexico"></pf-option>
<pf-option value="North Carolina"></pf-option>
  </pf-select>
</section>
<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>
<style>
#typeahead-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>