Select

<div class="ui-select">
  <button type="button" class="ui-select__trigger field-control" role="combobox"
    aria-haspopup="listbox" aria-expanded="false" aria-labelledby="role-label">
    <span class="ui-select__value">Engineer</span>
    <span class="ui-icon ui-icon--chevron-down ui-select__chevron" aria-hidden="true"></span>
  </button>
  <ul class="ui-select__menu" role="listbox">
    <li role="presentation">
      <button type="button" class="ui-select__option is-selected" role="option" aria-selected="true">
        <span class="ui-select__option-label">Engineer</span>
        <span class="ui-icon ui-icon--check ui-select__check" aria-hidden="true"></span>
      </button>
    </li>
  </ul>
</div>

import { Select } from 'caustica-design/core'
import 'caustica-design/css'

<Select
  value={role}
  onChange={setRole}
  options={[
    { value: 'engineer', label: 'Engineer' },
    { value: 'designer', label: 'Designer' },
  ]}
  aria-labelledby="role-label"
/>