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

Switch

<fieldset class="form-switch form-switch--disabled" disabled>
          <legend class="form-switch__legend">Switch Group:</legend>
            <div class="form-switch__option">
              <label class="switch-root switch-root--disabled">
                <div class="switch-track">
                  <input type="checkbox" name="option-1" class="switch-native-input" role="switch" checked disabled>
                  <span class="switch-handle"></span>
                </div>
                Option #1
              </label>
            </div>
            <div class="form-switch__option">
              <label class="switch-root switch-root--disabled switch-root--label-left">
                Option #2 - Label Left
                <div class="switch-track">
                  <input type="checkbox" name="option-2" class="switch-native-input" role="switch" checked disabled>
                  <span class="switch-handle"></span>
                </div>
              </label>
            </div>
        </fieldset>

        <div class="form-switch">
          <div class="form-switch__option">
            <label class="switch-root">
              <div class="switch-track">
                <input type="checkbox" name="single-option" class="switch-native-input" role="switch">
                <span class="switch-handle"></span>
              </div>
              Single Toggle
            </label>
          </div>
        </div>

Switch Group:

Option #1

Option #2

.form-switch

Switch Group - Disabled:

Option #1

Option #2

.form-switch.form-switch--disabled

Switch Group - Label Left:

Option #1

Option #2

.switch-root--label-left

Standalone (No Legend)

Dark Mode

Checkbox

<fieldset class="form-checkbox form-checkbox--disabled" disabled>
	<legend class="form-checkbox__label">Multiple choice question:</legend>
	<div class="form-checkbox__option">
		<input type="checkbox" name="checkboxGroup1" id="checkboxGroup1-option1" value="option1">
		<label for="checkboxGroup1-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>

Date Field

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

Start Date

Sometimes additional error text may be required.

.form-input

End Date

A end date might be required.

.form-input.form-input--required

Start Date

Sometimes additional error text may be required.

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

Start Date

Sometimes additional error text may be required.

.form-input.form-input--disabled

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