Form Elements

Text field

<input class="euaa-form-element" type="text" value="text" />
<input class="euaa-form-element" type="text" value="text" disabled />
<input class="euaa-form-element euaa-form-element--error" type="text" value="text" />
<input class="euaa-form-element" type="password" value="text" />

Textarea

This is a text area This is a disabled text area

<textarea class="euaa-form-element" />This is a text area</textarea>
<textarea class="euaa-form-element" disabled />This is a disabled text area</textarea>

Drop down

select from this list type 1 type 2 type 3 type 4 type 5 select from this list type 1 type 2 type 3 type 4 type 5

<select class="euaa-form-element">
    <option>select from this list</option>
    <option>type 1</option>
    <option>type 2</option>
    <option>type 3</option>
    <option>type 4</option>
    <option>type 5</option>
</select>
<select class="euaa-form-element euaa-form-element--error">
    <option>select from this list</option>
    <option>type 1</option>
    <option>type 2</option>
    <option>type 3</option>
    <option>type 4</option>
    <option>type 5</option>
</select>

Drop down - Multiple select

select from this list type 1 type 2 type 3 type 4 type 5

<select multiple class="euaa-form-element">
    <option>select from this list</option>
    <option>type 1</option>
    <option>type 2</option>
    <option>type 3</option>
    <option>type 4</option>
    <option>type 5</option>
</select>

Checkboxes

One Two Three Four Checked Disabled Disabled

<label class="euaa-chkbox u-pad-b-m u-display-flex">
    <input type="checkbox" checked="checked">
    <span class="euaa-chkbox__checkmark"></span>
    One
</label>
<label class="euaa-chkbox u-pad-b-m u-display-block">
    <input type="checkbox">
    <span class="euaa-chkbox__checkmark"></span>
    Two
</label>
<label class="euaa-chkbox u-pad-b-m u-display-flex">
    <input type="checkbox">
    <span class="euaa-chkbox__checkmark"></span>
    Three
</label>
<label class="euaa-chkbox u-pad-b-m u-display-flex">
    <input type="checkbox">
    <span class="euaa-chkbox__checkmark"></span>
    Four
</label>
<label class="euaa-chkbox euaa-chkbox--disabled u-pad-b-m u-display-flex">
    <input type="checkbox" checked="checked" disabled>
    <span class="euaa-chkbox__checkmark"></span>
    Checked Disabled
</label>
<label class="euaa-chkbox euaa-chkbox--disabled u-pad-b-m u-display-flex">
    <input type="checkbox" disabled>
    <span class="euaa-chkbox__checkmark"></span>
    Disabled
</label>

Radiobuttons

One Two Three Four Checked Disabled Disabled

<label class="euaa-radiobutton u-pad-b-m u-display-flex">
    <input type="radio" checked="checked" name="radio">
    <span class="euaa-radiobutton__circle"></span>
    One
</label>
<label class="euaa-radiobutton u-pad-b-m u-display-flex">
    <input type="radio" name="radio">
    <span class="euaa-radiobutton__circle"></span>
    Two
</label>
<label class="euaa-radiobutton u-pad-b-m u-display-flex">
    <input type="radio" name="radio">
    <span class="euaa-radiobutton__circle"></span>
    Three
</label>
<label class="euaa-radiobutton u-pad-b-m u-display-flex">
    <input type="radio" name="radio">
    <span class="euaa-radiobutton__circle"></span>
    Four
</label>
<label class="euaa-radiobutton euaa-radiobutton--disabled u-pad-b-m u-display-flex">
    <input type="radio" name="radio-1" checked="checked" disabled>
    <span class="euaa-radiobutton__circle"></span>
    Checked Disabled
</label>
<label class="euaa-radiobutton euaa-radiobutton--disabled u-display-flex">
    <input type="radio" name="radio-1" disabled>
    <span class="euaa-radiobutton__circle"></span>
    Disabled
</label>