Dropdown

Taxonomic name: A-DROPDOWN

Archive - Updated 20/06/17. Current version

Atom

Beta v.1.1.4 - Beta v.1.2.0

Mark-up structure of validated and errored drop-down selectors has been altered in order to match new styling. Previously messages placed after form inputs.

<div class="m-form-row is-valid">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<span class="a-dropdown">
			<select class="a-dropdown__select" name="..." id="..." disabled>
				...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
		<p class="m-form-row__validation-message">...</p>
	</div>
</div>
<div class="m-form-row is-error">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<span class="a-dropdown">
			<select class="a-dropdown__select" name="..." id="...">
					...
			</select>
			<span class="a-dropdown__ui"></span>
		</span>
		<p class="m-form-row__error-message">...</p>
	</div>
</div>
Previous Beta v.1.2.0 examples
Previous to Beta v.1.2.0 examples.

Beta v.1.0.0 - Beta v.1.1.4

For documentation on dropdowns prior to v.1.1.4 see our deprecated dropdown documentation.