Form Select

SCSS Location: /styles/scss/partial/_forms.scss
  • Status: Design
  • Status: Development
  • Status: Documentation


Custom Select uses the standard Select element but with a CSS-styled overlay that applied a custom design. The Options are still displayed in a browser default flyout.


  • A Default Selection should be added as the first option which will display prior to the user interacting with the Select element.
  • Selections should appear on click, not hover.
  • Selecting an item from the dropdown will dismiss it.
  • Clicking outside will dismiss the dropdown.


The Custom Select works just like a normal Select elements and can be used standalone or in conjunction with other form elements.