CSS reference - Bifrost

Design React CSS

Figma

Select

Go to top

Also see /react/select

React component

Also see /css/input

Provide feedback or description

HTML

<div class="bf-select-container">
  <label for="uniqueSelectId" class="bf-label">Choose a pet</label>
  <select name="pets" id="uniqueSelectId" class="bf-select">
    <option value="">No pet selected</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>
</div>

Choose a pet

Sandbox

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding">
  <div class="bf-select-container">
    <label for="uniqueSelectId" class="bf-label">Choose a pet</label>
    <select name="pets" id="uniqueSelectId" class="bf-select">
      <option value="">No pet selected</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
</div>