Dropdown Styles
Input Dropdown - Native
<fieldset class="form__row form__input">
<select name="#NAME" value="3" id="select">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1" data-type="option">Dropdown link 1</option>
<option value="#VALUE2" data-type="option">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3" data-type="option">Dropdown link 3</option>
<option value="#VALUE4" data-type="option">Dropdown link 4</option>
<option value="#VALUE5" data-type="option">Dropdown link 5</option>
</optgroup>
</select>
<label for="select">Label Select</label>
</fieldset>
Input Dropdown - Basic
<fieldset class="form__row">
<div class="form__input dropdown" role="group">
<select class="dropdown__select" name="#NAME" id="select1" data-type="basic">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
<label class="dropdown__label" for="select1">Label Select</label>
</div>
</fieldset>
Input Dropdown - Checkbox
<fieldset class="form__row">
<div class="form__input dropdown" role="group">
<input type="hidden" name="#NAME" value="">
<select class="dropdown__select" name="#NAME" id="select2" data-type="checkbox">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
<label class="dropdown__label" for="select2">Label Select</label>
</div>
</fieldset>
Input Dropdown - Radio
<fieldset class="form__row">
<div class="form__input dropdown" role="group">
<select class="dropdown__select" name="#NAME" id="select3" data-type="radio">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
<label class="dropdown__label" for="select3">Label Select</label>
</div>
</fieldset>
Button Dropdown - Primary
<fieldset class="form__row">
<div class="form__input dropdown dropdown--button dropdown--button--primary" role="group">
<select class="dropdown__select" name="#NAME" id="select4" data-type="basic">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
</div>
</fieldset>
Button Dropdown - Secondary
<fieldset class="form__row">
<div class="form__input dropdown dropdown--button dropdown--button--secondary" role="group">
<select class="dropdown__select" name="#NAME" id="select5" data-type="basic">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
</div>
</fieldset>
Button Dropdown - Tertiary
<fieldset class="form__row">
<div class="form__input dropdown dropdown--button dropdown--button--tertiary" role="group">
<select class="dropdown__select" name="#NAME" id="select6" data-type="basic">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
</div>
</fieldset>
Button Dropdown - Outline Light
<fieldset class="form__row">
<div class="form__input dropdown dropdown--button dropdown--button--outline-light" role="group">
<input type="hidden" name="#NAME" value="">
<select class="dropdown__select" name="#NAME" id="select7" data-type="checkbox">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
</div>
</fieldset>
Button Dropdown - Outline Dark
<fieldset class="form__row">
<div class="form__input dropdown dropdown--button dropdown--button--outline-dark" role="group">
<select class="dropdown__select" name="#NAME" id="select8" data-type="radio">
<option disabled selected>I need information on...</option>
<optgroup label="List Heading">
<option value="#VALUE1">Dropdown link 1</option>
<option value="#VALUE2">Dropdown link 2</option>
</optgroup>
<optgroup label="List Heading">
<option value="#VALUE3">Dropdown link 3</option>
<option value="#VALUE4">Dropdown link 4</option>
<option value="#VALUE5">Dropdown link 5</option>
</optgroup>
</select>
</div>
</fieldset>
Form Dropdown Documentation
Use
Javascript it used to convert a select input into a custom dropdown element. When the custom dropdown is changed the hidden select element also changes in value, so this value can be submitted with the form. However, in the case of the checkbox dropdown, a hidden input field is filled with the values selected separated by a comma with no space.
Placeholder - Add both the selected and disabled attributes to the placeholder option to convert to placeholder
Headings - To utilise headings use the optgroup tag
Prefilled state - To show current values on load add the selected state to the correct option, or in the checkbox dropdown case fill the hidden input with the values, separated by a comma.
Variations
The button and input variations use the same code base and does not use the button SCSS styling. Therefore if the button styling changes in the future the button dropdown will need to change.