@ebay/skin 18.0.8 → 18.2.0

package/src/modules/field.marko

@@ -0,0 +1,1242 @@
+<div id="field">
+    <section-header metadata=input.metadata name=input.name/>
+    <p>The field module facilitates the layout of a form control and its associated label, plus any other applicable text or sub-controls (e.g. error text or help button).</p>
+
+    <h3 id="field-unstacked">Unstacked Field</h3>
+    <p>The <span class="highlight">field__label</span> &amp; <span class="highlight">field__control</span> elements are inline by default, taking up only as much horizontal space as they need.</p>
+    <p>Multiple fields can be laid out inline by using the span tag with <span class="highlight">field</span> class, as per the example below.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label" for="field-unstacked-1">Field 1</label>
+                <span class="field__control textbox">
+                    <input class="textbox__control" id="field-unstacked-1" type="text" placeholder="placeholder text" />
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label" for="field-unstacked-2">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select name="field-unstacked-2" id="field-unstacked-2">
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label" for="field-unstacked-3">Field 3</label>
+                <span class="field__control switch switch--form">
+                    <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field-unstacked-3" />
+                    <span class="switch__button"></span>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label" for="field1">Field 1</label>
+    <span class="field__control textbox">
+        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
+    </span>
+</span>
+<span class="field">
+    <label class="field__label" for="field2">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select name="field2" id="field2">
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</span>
+<span class="field">
+    <label class="field__label" for="field3">Field 3</label>
+    <span class="field__control switch">
+        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
+        <span class="switch__button"></span>
+    </span>
+</span>
+    </highlight-code>
+
+    <p>Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="field" style="margin-top: 0">
+                <label class="field__label" for="field-unstacked-4">Field 1</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="field-unstacked-4" type="text" placeholder="placeholder text" />
+                </span>
+            </div>
+            <div class="field">
+                <label class="field__label" for="field-unstacked-5">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select name="field-unstacked-5" id="field-unstacked-5">
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </div>
+            <div class="field" style="margin-bottom: 0">
+                <label class="field__label" for="field-unstacked-6">Field 3</label>
+                <span class="field__control switch switch--form">
+                    <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field-unstacked-6" />
+                    <span class="switch__button"></span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<div class="field">
+    <label class="field__label" for="field1">Field 1</label>
+    <span class="field__control textbox">
+        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
+    </span>
+</div>
+<div class="field">
+    <label class="field__label" for="field2">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select name="field2" id="field2">
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</div>
+<div class="field">
+    <label class="field__label" for="field3">Field 3</label>
+    <span class="field__control switch">
+        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
+        <span class="switch__button"></span>
+    </span>
+</div>
+    </highlight-code>
+
+    <p>For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the <span class="highlight">field--align-top</span> modifier to align it to the top.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field field--align-top">
+                <label class="field__label" for="field-textarea-1">Field 1</label>
+                <span class="field__control textbox">
+                    <textarea class="textbox__control" id="field-textarea-1"></textarea>
+                </span>
+            </span>
+        </div>
+    </div>
+
+<highlight-code type="html" >
+<span class="field field--align-top">
+    <label class="field__label" for="field-textarea-1">Field 1</label>
+    <span class="field__control textbox">
+        <textarea class="textbox__control" id="field-textarea-1"></textarea>
+    </span>
+</span>
+</highlight-code>
+
+    <h3 id="field-stacked">Stacked Field</h3>
+    <p>For a label stacked above the control, use the <span class="highlight">field__label--stacked</span> element modifier.</p>
+    <p>Again, multiple fields can be laid out inline by using a span tag, as per the example below.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-stacked-1">Field 1</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="field-stacked-1" type="text" placeholder="placeholder text" />
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-stacked-2">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select name="field-stacked-2" id="field-stacked-2">
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-stacked-3">Field 3</label>
+                <span class="field__control switch switch--form">
+                    <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field-stacked-3" />
+                    <span class="switch__button"></span>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field1">Field 1</label>
+    <span class="textbox">
+        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
+    </span>
+</span>
+<span class="field">
+    <label class="field__label field__label--stacked" for="field2">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select name="field2" id="field2">
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</span>
+<span class="field">
+    <label class="field__label field__label--stacked">Field 3</label>
+    <span class="field__control switch">
+        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
+        <span class="switch__button"></span>
+    </span>
+</span>
+    </highlight-code>
+
+    <p>Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="field" style="margin-top: 0">
+                <label class="field__label field__label--stacked" for="field-stacked-4">Field 1</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="field-stacked-4" type="text" placeholder="placeholder text" />
+                </span>
+            </div>
+            <div class="field">
+                <label class="field__label field__label--stacked" for="field-stacked-5">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select name="field-stacked-5" id="field-stacked-5">
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </div>
+            <div class="field" style="margin-bottom: 0">
+                <label class="field__label field__label--stacked" for="field-stacked-6">Field 3</label>
+                <span class="field__control switch switch--form">
+                    <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field-stacked-6" />
+                    <span class="switch__button"></span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<div class="field">
+    <label class="field__label field__label--stacked" for="field1">Field 1</label>
+    <span class="textbox">
+        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
+    </span>
+</div>
+<div class="field">
+    <label class="field__label field__label--stacked" for="field2">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select name="field2" id="field2">
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</div>
+<span class="field">
+    <label class="field__label field__label--stacked">Field 3</label>
+    <span class="field__control switch">
+        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
+        <span class="switch__button"></span>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="field-fontsize">Field Font-Size</h3>
+    <p>The field label will honour any font-size cascade. Wrap the label and control in a <span class="highlight">field__group</span> element to maintain vertical alignment.</p>
+    <p><strong>NOTE</strong>: form controls do not inherit the font-size cascade. This is default browser behaviour.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field" style="font-size: 18px;">
+                <span class="field__group">
+                    <label class="field__label" for="field-fontsize-1">Field 1</label>
+                    <span class="field__control textbox">
+                        <input class="textbox__control" id="field-fontsize-1" type="text" placeholder="placeholder text" />
+                    </span>
+                </span>
+            </span>
+            <span class="field" style="font-size: 18px;">
+                <span class="field__group">
+                    <label class="field__label" for="field-fontsize-2">Field 2</label>
+                    <span class="field__control">
+                        <span class="select">
+                            <select name="field-fontsize-2" id="field-fontsize-2">
+                                <option value="1">Option 1</option>
+                                <option value="2">Option 2</option>
+                                <option value="3">Option 3</option>
+                            </select>
+                            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                                <icon-symbol name="chevron-down-12" />
+                            </svg>
+                        </span>
+                    </span>
+                </span>
+            </span>
+            <span class="field" style="font-size: 18px;">
+                <span class="field__group">
+                    <label class="field__label" for="field-fontsize-3">Field 3</label>
+                    <span class="field__control switch switch--form">
+                        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field-fontsize-3" />
+                        <span class="switch__button"></span>
+                    </span>
+                </span>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field" style="font-size: 18px;">
+    <span class="field__group">
+        <label class="field__label" for="email">Field 1</label>
+        <span class="field__control textbox">
+            <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
+        </span>
+    </span>
+</span>
+<span class="field" style="font-size: 18px;">
+    <span class="field__group">
+        <label class="field__label" for="size">Field 2</label>
+        <span class="field__control">
+            <span class="select">
+                <select name="size" id="size">
+                    <option value="1">Option 1</option>
+                    <option value="2">Option 2</option>
+                    <option value="3">Option 3</option>
+                </select>
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
+                </svg>
+            </span>
+        </span>
+    </span>
+</span>
+<span class="field" style="font-size: 18px;">
+    <span class="field__group">
+        <label class="field__label" for="field3">Field 3</label>
+        <span class="field__control switch">
+            <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
+            <span class="switch__button"></span>
+        </span>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="field-disabled">Disabled Field</h3>
+    <p>The disabled control is conveyed using the <span class="highlight">disabled</span> attribute. The value of a disabled control is <strong>not</strong> passed to the server.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--disabled" for="field-disabled-1">Field 1</label>
+                <span class="field__control textbox">
+                    <input class="textbox__control" id="field-disabled-1" type="text" value="placeholder text" disabled />
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label field__label--disabled" for="field-disabled-2">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select name="field-disabled-2" id="field-disabled-2" disabled>
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label field__label--disabled" for="field-disabled-3">Field 3</label>
+                <span class="field__control switch switch--form">
+                    <input disabled aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field-disabled-3" />
+                    <span class="switch__button"></span>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--disabled" for="email">Field 1</label>
+    <span class="field__control textbox">
+        <input class="textbox__control" id="field1" type="text" value="placeholder text" disabled />
+    </span>
+</span>
+<span class="field">
+    <label class="field__label field__label--disabled" for="size">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select name="field2" id="field2" disabled>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</span>
+<span class="field">
+    <label class="field__label field__label--disabled" for="field3">Field 3</label>
+    <span class="field__control switch">
+        <input disabled aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
+        <span class="switch__button"></span>
+    </span>
+</span>
+    </highlight-code>
+
+    <p><strong>TIP:</strong> Disabled controls are exempt from <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG colour contrast requirements</a>.</p>
+
+    <h3 id="field-readonly">Readonly Field</h3>
+    <p>A readonly control is conveyed using the <span class="highlight">readonly</span> attribute. The value of a readonly control is passed to the server.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label" for="field-readonly-1">Field 1</label>
+                <span class="field__control textbox">
+                    <input class="textbox__control" id="field-readonly-1" type="text" name="disabled-textbox" value="placeholder text" readonly />
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label" for="field-readonly-2">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select name="field-readonly-2" id="field-readonly-2" readonly>
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label" for="email">Field 1</label>
+    <span class="field__control textbox">
+        <input class="textbox__control" id="field1" type="text" value="placeholder text" readonly />
+    </span>
+</span>
+<span class="field">
+    <label class="field__label" for="size">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select name="field2" id="field2" readonly>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="field-required">Required Field</h3>
+    <p>A required field is conveyed visually with an asterisk, and non-visually using the <span class="highlight">aria-required</span> property.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label" for="field-required-1">Field 1 <sup>*</sup></label>
+                <span class="field__control textbox">
+                    <input aria-required="true" class="textbox__control" id="field-required-1" type="text" placeholder="placeholder text" />
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label" for="field-required-2">Field 2 <sup>*</sup></label>
+                <span class="field__control">
+                    <span class="select">
+                        <select aria-required="true" id="field-required-2">
+                            <option value="0" disabled selected>-select-</option>
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label" for="email">Field 1 <sup>*</sup></label>
+    <span class="field__control textbox">
+        <input aria-required="true" class="textbox__control" id="field1" type="text" placeholder="placeholder text"/>
+    </span>
+</span>
+<span class="field">
+    <label class="field__label" for="size">Field 2 <sup>*</sup></label>
+    <span class="field__control">
+        <span class="select">
+            <select aria-required="true" id="field2">
+                <option value="0" disabled selected>-select-</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="field-invalid">Invalid Field</h3>
+    <p>An invalid control is conveyed <em>visually</em> via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed <em>non-visually</em> using the <span class="highlight">aria-invalid</span> state.</p>
+    <p><strong>IMPORTANT:</strong> The example below shows the field with red border only. Do not forget that <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">colour should not be used as the only visual means of conveying information</a>. A description and/or icon is also required. See next section for more details.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label" for="field-invalid-1">Field 1</label>
+                <span class="field__control textbox">
+                    <input aria-invalid="true" class="textbox__control" id="field-invalid-1" type="text" placeholder="placeholder text" value="foobar" />
+                </span>
+            </span>
+            <span class="field">
+                <label class="field__label" for="field-invalid-2">Field 2</label>
+                <span class="field__control">
+                    <span class="select">
+                        <select aria-invalid="true" id="field-invalid-2">
+                            <option value="0" disabled selected>-select-</option>
+                            <option value="1">Option 1</option>
+                            <option value="2">Option 2</option>
+                            <option value="3">Option 3</option>
+                        </select>
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                </span>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label" for="email">Field 1</label>
+    <span class="field__control textbox">
+        <input aria-invalid="true" class="textbox__control" id="field1" type="text" placeholder="placeholder text">
+    </span>
+</span>
+<span class="field">
+    <label class="field__label" for="size">Field 2</label>
+    <span class="field__control">
+        <span class="select">
+            <select aria-invalid="true" id="field2">
+                <option value="0" disabled selected>-select-</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="field-description">Field Description</h3>
+    <p>A field may have nearby text to describe additional instructions, status or validation error of the control.</p>
+    <p>The <span class="highlight">field__description</span> element defines some minimal styling, but does not dictate location or layout. This element has modifiers for <span class="positive">confirmation</span>, <span style="color: #0654ba;">information</span> and <span class="emphasis">attention</span>, depending on the type of descriptive text (or icon).</p>
+    <p><strong>TIP:</strong> The description element can be designated as an ARIA <a href="https://ebay.gitbooks.io/mindpatterns/content/techniques/liveregions.html">live-region</a> if client-side updates occur.</p>
+
+    <h4>Text on Side of Field</h4>
+    <p>A description can be placed adjacent to any stacked or unstacked field simply by using an inline-level tag, such as span.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label" for="field-description-1">Field 1</label>
+                <span class="field__control textbox">
+                    <input aria-describedby="field-description-1-description" class="textbox__control" id="field-description-1" type="text" />
+                </span>
+                <span class="field__description" id="field-description-1-description">
+                    <span>Field description or error</span>
+                </span>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label" for="field1">Field 1</label>
+    <span class="field__control textbox">
+        <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
+    </span>
+    <span class="field__description" id="field1-description">
+        <span>Field description or error</span>
+    </span>
+</span>
+    </highlight-code>
+
+    <p>To change the type of decription you would use <span class="highlight">field__description--confirmation</span>, <span class="highlight">field__description--information</span>, or <span class="highlight">field__description--attention</span>.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="field">
+                <label class="field__label field__label--stacked" for="field-description-variant-1">Field 1</label>
+                <span class="textbox">
+                    <input aria-describedby="field-descripiton-variant-1-description" class="textbox__control" id="field-description-variant-1" type="text" placeholder="placeholder text" />
+                </span>
+                <span class="field__description" id="field-descripiton-variant-1-description">
+                    <span>Field description - default</span>
+                </span>
+            </div>
+            <div class="field">
+                <label class="field__label field__label--stacked" for="field-description-variant-2">Field 2</label>
+                <span class="textbox">
+                    <input aria-describedby="field-descripiton-variant-2-description" class="textbox__control" id="field-description-variant-2" type="text" placeholder="placeholder text" />
+                </span>
+                <span class="field__description field__description--confirmation" id="field-descripiton-variant-2-description">
+                    <span>Field description - confirmation</span>
+                </span>
+            </div>
+            <div class="field">
+                <label class="field__label field__label--stacked" for="field-description-variant-3">Field 3</label>
+                <span class="textbox">
+                    <input aria-describedby="field-descripiton-variant-3-description" class="textbox__control" id="field-description-variant-3" type="text" placeholder="placeholder text" />
+                </span>
+                <span class="field__description field__description--information" id="field-descripiton-variant-3-description">
+                    <span>Field description - information</span>
+                </span>
+            </div>
+            <div class="field">
+                <label class="field__label field__label--stacked" for="field-description-variant-4">Field 4</label>
+                <span class="textbox">
+                    <input aria-describedby="field-descripiton-variant-4-description" class="textbox__control" id="field-description-variant-4" type="text" placeholder="placeholder text" aria-invalid="true" />
+                </span>
+                <span class="field__description field__description--attention" id="field-descripiton-variant-4-description">
+                    <span>Field description - error (attention)</span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <h4>Text Below Stacked Field</h4>
+    <p>A description can be placed underneath a stacked field simply by using a block-level tag, such as div.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-description-2">Field 1</label>
+                <div class="field__control textbox">
+                    <input aria-describedby="field-description-2-description" class="textbox__control" id="field-description-2" type="text" />
+                </div>
+                <div class="field__description" id="field-description-2-description">
+                    <span>Field description or error</span>
+                </div>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field1">Field 1</label>
+    <div class="field__control textbox">
+        <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
+    </div>
+    <div class="field__description" id="field1-description">
+        <span>Field description or error</span>
+    </div>
+</span>
+    </highlight-code>
+
+    <h4>Text Above or Below Unstacked Field</h4>
+    <p>A description can be added directly above and/or below the control by utlising CSS table-layout via the <span class="highlight">field--table</span> modifier and <span class="highlight">field__row</span> elements.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field field--table">
+                <div class="field__row">
+                    <span><!-- empty cell--></span>
+                    <span class="field__description" id="field-description-3-description">
+                        <span>Field description or error</span>
+                    </span>
+                </div>
+                <div class="field__row">
+                    <label class="field__label" for="field-description-3">Field 1</label>
+                    <span class="textbox">
+                        <input aria-describedby="field-description-3-description" class="textbox__control" id="field-description-3" type="text" />
+                    </span>
+                </div>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field field--table">
+    <div class="field__row">
+        <span><!-- empty cell--></span>
+        <span class="field__description" id="field1-description">
+            <span>Field description or error</span>
+        </span>
+    </div>
+    <div class="field__row">
+        <label class="field__label" for="field1">Field Label</label>
+        <span class="textbox">
+            <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
+        </span>
+    </div>
+</span>
+    </highlight-code>
+
+    <h4>Text Below Floating label</h4>
+    <p>When you use a floating label, you can have the description text below</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field floating-label">
+                <label class="floating-label__label" for="field-description-4">Field 1</label>
+                <div class="field__control textbox">
+                    <input aria-describedby="field-description-4-description" class="textbox__control" id="field-description-4" type="text" />
+                </div>
+                <div class="field__description" id="field-description-4-description">
+                    <span>Field description or error</span>
+                </div>
+            </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field floating-label">
+    <label class="floating-label__label" for="field1">Field 1</label>
+    <div class="field__control textbox">
+        <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
+    </div>
+    <div class="field__description" id="field1-description">
+        <span>Field description or error</span>
+    </div>
+</span>
+    </highlight-code>
+
+    <h4 id="field-error-state">Listbox Button with Label in Error State</h4>
+    <p>You can use a listbox button as a field. This example includes a label, the listbox button as well an error message with the entire thing in an error state.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-listbox-button-1">Listbox Button 1</label>
+                <div class="field__control">
+                    <span class="listbox-button listbox-button--form listbox-button--error" data-makeup-auto-select="false">
+                        <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox" aria-describedby="field-listbox-button-1-description">
+                            <span class="btn__cell">
+                                <span class="btn__label">Color: </span>
+                                <span class="btn__text">-</span>
+                                <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
+                                    <icon-symbol name="chevron-down-12" />
+                                </svg>
+                            </span>
+                        </button>
+                        <div class="listbox-button__listbox">
+                            <div class="listbox-button__options" role="listbox">
+                                <div class="listbox-button__option" role="option">
+                                    <span class="listbox-button__value">Red</span>
+                                    <svg class="icon icon--16" height="10" width="14">
+                                        <icon-symbol name="tick-16" />
+                                    </svg>
+                                </div>
+                                <div class="listbox-button__option" role="option">
+                                    <span class="listbox-button__value">Blue</span>
+                                    <svg class="icon icon--16" height="10" width="14">
+                                        <icon-symbol name="tick-16" />
+                                    </svg>
+                                </div>
+                                <div class="listbox-button__option" role="option" aria-disabled="true">
+                                    <span class="listbox-button__value">Yellow</span>
+                                    <svg class="icon icon--16" height="10" width="14">
+                                        <icon-symbol name="tick-16" />
+                                    </svg>
+                                </div>
+                                <div class="listbox-button__option" role="option">
+                                    <span class="listbox-button__value">Green</span>
+                                    <svg class="icon icon--16" height="10" width="14">
+                                        <icon-symbol name="tick-16" />
+                                    </svg>
+                                </div>
+                            </div>
+                        </div>
+                        <select id="field-listbox-button-1" hidden="" class="listbox__native">
+                            <option value="1"></option>
+                            <option value="2"></option>
+                            <option value="3"></option>
+                            <option value="4"></option>
+                        </select>
+                    </span>
+                </div>
+                <div class="field__description field__description--attention" id="field-listbox-button-1-description">
+                    <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
+                        <icon-symbol name="attention-filled-16" />
+                    </svg>
+                    <span>There was an error</span>
+                </div>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-listbox-button-1">Listbox Button 1</label>
+    <div class="field__control textbox">
+        <span class="listbox-button listbox-button--form listbox-button--error" data-makeup-auto-select="false">
+            <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox" aria-describedby="field-listbox-button-1-description">
+                <span class="btn__cell">
+                    <span class="btn__label">Color: </span>
+                    <span class="btn__text">-</span>
+                    <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
+                        <use href="#icon-chevron-down-12"></use>
+                    </svg>
+                </span>
+            </button>
+            <div class="listbox-button__listbox">
+                <div class="listbox-button__options" role="listbox">
+                    <div class="listbox-button__option" role="option">
+                        <span class="listbox-button__value">Red</span>
+                        <svg class="icon icon--16" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                    <div class="listbox-button__option" role="option">
+                        <span class="listbox-button__value">Blue</span>
+                        <svg class="icon icon--16" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                    <div class="listbox-button__option" role="option" aria-disabled="true">
+                        <span class="listbox-button__value">Yellow</span>
+                        <svg class="icon icon--16" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                    <div class="listbox-button__option" role="option">
+                        <span class="listbox-button__value">Green</span>
+                        <svg class="icon icon--16" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+            <select id="field-listbox-button-1" hidden="" class="listbox__native">
+                <option value="1"></option>
+                <option value="2"></option>
+                <option value="3"></option>
+                <option value="4"></option>
+            </select>
+        </span>
+    </div>
+    <div class="field__description field__description--attention" id="field-listbox-button-1-description">
+        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
+            <use href="#icon-attention-filled-16"></use>
+        </svg>
+        <span>There was an error</span>
+    </div>
+</span>
+    </highlight-code>
+
+    <h4>Textbox in Error State</h4>
+    <p>You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-textbox-1">Textbox 1</label>
+                <div class="field__control textbox">
+                    <input aria-describedby="field-textbox-1-description" class="textbox__control" id="field-textbox-1" type="text" aria-invalid="true" />
+                </div>
+                <div class="field__description field__description--attention" id="field-textbox-1-description">
+                    <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
+                        <icon-symbol name="attention-filled-16" />
+                    </svg>
+                    <span>There was an error</span>
+                </div>
+            </span>
+        </div>
+    </div>
+
+    <h4>Textbox in Error State</h4>
+    <p>You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.</p>
+
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-textbox-1">Textbox 1</label>
+    <div class="field__control textbox">
+        <input aria-describedby="field-textbox-1-description" class="textbox__control" id="field-textbox-1" type="text" aria-invalid="true" />
+    </div>
+    <div class="field__description field__description--attention" id="field-textbox-1-description">
+        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
+            <use href="#icon-attention-filled-16"></use>
+        </svg>
+        <span>There was an error</span>
+    </div>
+</span>
+    </highlight-code>
+
+    <h3 id="field-fluid">Fluid Field</h3>
+    <p>Form control elements (such as <span class="highlight">select</span> and <span class="highlight">input</span>) are inline-block by default, and will only use up as much of their parent's horizontal space as they need.</p>
+    <p>For a stacked field the control must be set to 100% width (using the <span class="highlight">fluid</span> utility class) to fill all available space.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="field-group" style="margin: 0">
+                <span class="field fluid">
+                    <label class="field__label field__label--stacked" for="field-fluid-block-1">Field 1</label>
+                    <div class="field__control textbox">
+                        <input class="textbox__control fluid" id="field-fluid-block-1" type="text" placeholder="placeholder text" />
+                    </div>
+                </span>
+                <span class="field fluid">
+                    <label class="field__label field__label--stacked" for="field-fluid-block-2">Field 2</label>
+                    <div class="field__control fluid">
+                        <div class="select select--fluid">
+                            <select name="field-fluid-block-2" id="field-fluid-block-2">
+                                <option value="1">Option 1</option>
+                                <option value="2">Option 2</option>
+                                <option value="3">Option 3</option>
+                            </select>
+                            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                                <icon-symbol name="chevron-down-12" />
+                            </svg>
+                        </div>
+                    </div>
+                </span>
+            </div>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<div class="field-group">
+    <span class="field fluid">
+        <label class="field__label field__label--stacked" for="field1">Field 1</label>
+        <div class="field__control textbox">
+            <input class="textbox__control fluid" id="field1" name="field1" type="text" placeholder="placeholder text" />
+        </div>
+    </span>
+    <span class="field fluid">
+        <label class="field__label field__label--stacked" for="field2">Field 2</label>
+        <div class="field__control fluid">
+            <div class="select select--fluid">
+                <select name="field2" id="field2">
+                    <option value="1">Option 1</option>
+                    <option value="2">Option 2</option>
+                    <option value="3">Option 3</option>
+                </select>
+                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
+                </svg>
+            </div>
+        </div>
+    </span>
+</div>
+    </highlight-code>
+    <p>The above example shows the fields in a flexbox layout. This layout is created using the <span class="highlight">field-group</span> helper class. Notice that each field is also set to fluid, in order to fill all available flexbox space (flexbox layout takes care of dividing the space evenly between fluid fields).</p>
+
+    <p>If we set the form control width to 100% in an <em>unstacked</em> field, the control would flow to a new line <em>below</em> the label (effectively behaving like a stacked label). This behaviour can be avoided by adding an additional <span class="highlight">field__group</span> element to create flex layout <em>inside</em> of the field.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="field-group" style="margin: 0">
+                <span class="field fluid">
+                    <span class="field__group fluid">
+                        <label class="field__label no-wrap" for="field-fluid-unstacked-1">Field 1</label>
+                        <span class="field__control fluid textbox">
+                            <input class="textbox__control fluid" id="field-fluid-unstacked-1" type="text" placeholder="placeholder text" />
+                        </span>
+                    </span>
+                </span>
+                <span class="field fluid">
+                    <span class="field__group fluid">
+                        <label class="field__label no-wrap" for="field-fluid-unstacked-2">Field 2</label>
+                        <span class="field__control fluid">
+                            <span class="select select--fluid">
+                                <select name="field-fluid-unstacked-2" id="field-fluid-unstacked-2">
+                                    <option value="1">Option 1</option>
+                                    <option value="2">Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                                    <icon-symbol name="chevron-down-12" />
+                                </svg>
+                            </span>
+                        </span>
+                    </span>
+                </span>
+            </div>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<div class="field-group">
+    <span class="field fluid">
+        <span class="field__group fluid">
+            <label class="field__label no-wrap" for="field1">Field 1</label>
+            <span class="field__control fluid textbox">
+                <input class="textbox__control fluid" id="field1" type="text" placeholder="placeholder text" />
+            </span>
+        </span>
+    </span>
+    <span class="field fluid">
+        <span class="field__group fluid">
+            <label class="field__label no-wrap" for="field2">Field 2</label>
+            <span class="field__control fluid">
+                <span class="select select--fluid">
+                    <select name="field2" id="field2">
+                        <option value="1">Option 1</option>
+                        <option value="2">Option 2</option>
+                        <option value="3">Option 3</option>
+                    </select>
+                    <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                        <use href="#icon-chevron-down-12"></use>
+                    </svg>
+                </span>
+            </span>
+        </span>
+    </span>
+</div>
+    </highlight-code>
+    <p><strong>TIP:</strong> You may want to experiment with sizes other than 100%, and also the flexbox <span class="highlight">justify-content</span> property.</p>
+
+    <p>For a fluid control and description, those elements can be wrapped in a <span class="highlight">field__group</span> container to create flex layout.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="field-group" style="margin: 0">
+                <span class="field fluid">
+                    <label class="field__label field__label--stacked" for="field-fluid-block-3">Field 1</label>
+                    <div class="field__group">
+                        <span class="field__control textbox fluid">
+                            <input class="textbox__control fluid" id="field-fluid-block-3" type="text" placeholder="placeholder text" />
+                        </span>
+                        <span class="field__description">
+                            <span>Field description or error</span>
+                        </span>
+                    </div>
+                </span>
+                <span class="field fluid">
+                    <label class="field__label field__label--stacked" for="field-fluid-block-4">Field 2</label>
+                    <div class="field__group">
+                        <div class="field__control fluid">
+                            <div class="select select--fluid">
+                                <select id="field-fluid-block-4">
+                                    <option value="1">Option 1</option>
+                                    <option value="2">Option 2</option>
+                                    <option value="3">Option 3</option>
+                                </select>
+                                <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                                    <icon-symbol name="chevron-down-12" />
+                                </svg>
+                            </div>
+                        </div>
+                        <span class="field__description">
+                            <span>Field description or error</span>
+                        </span>
+                    </div>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<div class="field-group">
+    <span class="field fluid">
+        <label class="field__label field__label--stacked" for="field1-fluid-block-1">Field 1</label>
+        <div class="field__group">
+            <span class="field__control textbox fluid">
+                <input class="textbox__control fluid" id="field1" type="text" placeholder="placeholder text" />
+            </span>
+            <span class="field__description">
+                <span>Field description or error</span>
+            </span>
+        </div>
+    </span>
+    <span class="field fluid">
+        <label class="field__label field__label--stacked" for="field2">Field 2</label>
+        <div class="field__group">
+            <div class="field__control fluid">
+                <div class="select select--fluid">
+                    <select name="field-fluid-block-2" id="field2">
+                        <option value="1">Option 1</option>
+                        <option value="2">Option 2</option>
+                        <option value="3">Option 3</option>
+                    </select>
+                    <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                        <use href="#icon-chevron-down-12"></use>
+                    </svg>
+                </div>
+            </div>
+            <span class="field__description">
+                <span>Field description or error</span>
+            </span>
+        </div>
+    </span>
+</div>
+        </highlight-code>
+
+    <h3 id="field-character-count">Field Character Count</h3>
+    <p>A field may have a character count section typically under the input and aligned to the right.</p>
+
+    This variant adds a top-level container that houses both the field description and the character count, though field description or error is not necessary.
+
+    <p>In order to be accessible, the character count should have a clipped element to describe what it is. At the same time, aria-describedby should be added to the input element that points to the character count element. Finally, <span class="highlight">aria-live</span> should be off by default, but if it passes the current max characters, then it should be changed to polite. Once it goes back down below the max, it should go back to off.</p>
+
+    <h4>Field with Character Count Only</h4>
+    <p>Character character can be added by utlising CSS grid via the <span class="highlight">field__description--group</span> modifier and the addition of the relevant markup. By default if there is only one element in the group, it will align to the right</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
+                <span class="field__control textbox">
+                    <input type="text" aria-describedby="field-character-2" class="textbox__control" id="field-character-2-input" aria-live="off"  data-field-count="field-character-2"/>
+                </span>
+                <div class="field__description field__description--group">
+                    <span id="field-character-2">
+                        0 of 140
+                        <span class="clipped"> charaters</span>
+                    </span>
+                </div>
+            </span>
+        </div>
+    </div>
+
+<highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
+    <span class="field__control textbox">
+        <input type="text" aria-describedby="field-character-2" class="textbox__control" id="field-character-2-input" aria-live="off" />
+    </span>
+    <div class="field__description field__description--group">
+        <span id="field-character-2">
+            0 of 140
+            <span class="clipped"> charaters</span>
+        </span>
+    </div>
+</span>
+</highlight-code>
+
+    <h4>Field Description and Character Count</h4>
+    <p>A field description (or error) and character count can be added by adding an element before the field count. It will left align the description and right align the character count.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
+                <span class="field__control textbox">
+                    <input type="text" aria-describedby="field-describe-3 field-character-3" class="textbox__control" aria-live="off" data-field-count="field-character-3"/>
+                </span>
+                <div class="field__description field__description--group">
+                    <span id="field-describe-3">Field description or error</span>
+                    <span id="field-character-3">
+                        0 of 140
+                        <span class="clipped"> charaters</span>
+                    </span>
+                </div>
+           </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-character-2-input">Field 2</label>
+    <span class="field__control textbox">
+        <input type="text" aria-describedby="field-describe-3 field-character-3" class="textbox__control" aria-live="off"/>
+    </span>
+    <div class="field__description field__description--group">
+        <span id="field-describe-3">Field description or error</span>
+        <span id="field-character-3">
+            0 of 140
+            <span class="clipped"> charaters</span>
+        </span>
+    </div>
+</span>
+    </highlight-code>
+
+    <h4>Field Description and Character Count with Text area</h4>
+    <p>A field description (or error) and character count can also be added to a text area. Use similar markup as before but add a textarea element.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="field">
+                <label class="field__label field__label--stacked" for="field-textarea-2">Field 2</label>
+                <span class="field__control textbox">
+                    <textarea class="textbox__control" id="field-textarea-2" aria-describedby="field-character-4" aria-live="off"  data-field-count="field-character-4"></textarea>
+
+                </span>
+                <div class="field__description field__description--group">
+                    <span>Field description or error</span>
+                    <span id="field-character-4">
+                        0 of 140
+                        <span class="clipped"> charaters</span>
+                    </span>
+                </div>
+           </span>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-textarea-2">Field 2</label>
+    <span class="field__control textbox">
+        <textarea class="textbox__control" id="field-textarea-2" aria-describedby="field-describe-4 field-character-4" aria-live="off"></textarea>
+    </span>
+    <div class="field__description field__description--group">
+        <span id="field-describe-4">Field description or error</span>
+        <span id="field-character-4">
+            0 of 140
+            <span class="clipped"> charaters</span>
+        </span>
+    </div>
+</span>
+    </highlight-code>
+
+</div>
+export const metadata = {
+};