AAA MWG Style Guide | Form Fields

Input Field

<div class="form-input form-input--required">
	<label class="form-input__label" for="first-name">First name</label>
	<div class="form-input__wrapper">
		<input required type="text" name="first-name" id="first-name" class="form-input__element">
	</div>
	<div class="form-input__error">Sometimes additional error text may be required.</div>
</div>

First name

Sometimes additional error text may be required.

.form-input

Middle name

Sometimes additional error text may be required.

.form-input.form-input--required

Membership Number

.form-input.form-input--approved

Membership Number

.form-input.form-input--failed

Last name

Sometimes additional error text may be required.

.form-input.form-input--required.form-input--error

Last name

Sometimes additional error text may be required.

.form-input.form-input--disabled

Select Field

<div class="form-select form-select--required">
	<label class="form-select__label" for="your-question">What can we help you with?</label>
	<div class="form-select__wrapper">
		<select required name="your-question" id="your-question" class="form-select__element">
			<option value="">Option #1</option>
		</select>
	</div>
	<div class="form-select__error">Sometimes additional error text may be required.</div>
</div>

What can we help you with?

Sometimes additional error text may be required.

.form-select

Whare are your interests?

Sometimes additional error text may be required.

.form-select.form-select--required

Whare are your interests?

Sometimes additional error text may be required.

.form-select.form-select--required.form-select--error

Whare are your interests?

Sometimes additional error text may be required.

.form-select.form-select--disabled

Textarea

<div class="form-textarea form-textarea--required">
	<label class="form-textarea__label" for="comments">Whare are your thoughts?</label>
	<div class="form-textarea__wrapper">
		<textarea required name="comments" id="comments" class="form-textarea__element"></textarea>
	</div>
	<div class="form-textarea__error">Sometimes additional error text may be required.</div>
</div>

Whare are your thoughts?

Sometimes additional error text may be required.

.form-textarea

Whare are your thoughts?

Sometimes additional error text may be required.

.form-textarea.form-textarea--required

Whare are your thoughts?

Sometimes additional error text may be required.

.form-textarea.form-textarea--required.form-textarea--error

Whare are your thoughts?

Sometimes additional error text may be required.

.form-textarea.form-textarea--disabled

Checkbox

<fieldset class="form-checkbox form-checkbox--disabled">
	<legend class="form-checkbox__label">Multiple choice question:</legend>
	<div class="form-checkbox__option">
		<input type="checkbox" name="option1" id="option1" value="option1">
		<label for="option1">Option #1</label>
	</div>
</fieldset>

Multiple choice question:

Option #1

Option #2

Option #3

.form-checkbox

Multiple choice question:

Option #1

Option #2

Option #3

.form-checkbox.form-checkbox--disabled

Radio

<fieldset class="form-radio">
	<legend class="form-radio__label">Choose an option:</legend>
	<div class="form-radio__option">
		<input type="radio" name="option1" id="option1" value="option1">
		<label for="option1">Option #1</label>
	</div>
</fieldset>

Error Message

<div class="form-error-message">Error message goes here...</div>

This is an example of a general error message that can live at the top of a form field or another location when inline errors are not enough.

.form-error-message