Skip to main content
MybringDesign System

Select

A select element inside a label get its width from what’s longest of the label and the select’s content. Otherwise, it defaults to 100 % and can need some limitation, like wauto on itself if it’s not controlled by a parent. Selects are a combination of content and input, so they donmt behave exactly like text inputs, keep an eye on them not overflowing the page causing horizontal scroll.

Optgroup is a nice way to gather things like different customer numbers under one master customer number or name. 

<form class="mb-form">
  <label for="spaceships">Spaceship
    <select id="spaceships">
      <option>Azure Dragon</option>
      <option>Donnager</option>
      <option>Nauvoo</option>
      <option>Rocinante</option>
    </select>
  </label>

  <label for="spaceshipgroups">Spaceship in group
    <select id="spaceshipgroups">
      <optgroup label="Old types">
        <option>Azure Dragon</option>
        <option>Donnager</option>
      </optgroup>
      <optgroup label="New types">
        <option>Nauvoo</option>
        <option>Rocinante</option>
      </optgroup>
    </select>
  </label>
</form>