Pattern Lab

Text Fields

To Do: show examples of validation error variations of each field.

Error Input

HTML

									
										<p>
    To Do: show examples of validation error variations of each field.
</p>
<label class="error">Error Input</label>
<input class="is-error" type="text" placeholder="Text Input">

Text Input

Text Input *

HTML

									
										<label for="text">Text Input&nbsp;<abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input" class="textInput">

Email Input

Email Address

HTML

									
										<label for="emailaddress">Email Address</label>
<input id="emailaddress" type="email" placeholder="[email protected]" class="textInput">

Number Input

Number Input *

HTML

									
										<label for="number">Number Input <abbr title="Required">*</abbr></label>
<input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*" class="textInput">

Password Input

Password

HTML

									
										<label for="password">Password</label>
<input id="password" type="password" placeholder="Type your Password" class="textInput">

Text Area

Textarea

HTML

									
										<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" placeholder="Enter your message here" class="textInput"></textarea>

Url Input

Web Address

HTML

									
										<label for="webaddress">Web Address</label>
<input id="webaddress" type="url" placeholder="http://yoursite.com" class="textInput">

Checkboxes

Checkboxes *

Choice A
Choice B
Choice C

HTML

									
										<fieldset class="choices">
    <legend>Checkboxes <abbr title="Required">*</abbr></legend>
    <ul>
        <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
        <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
        <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
    </ul>
</fieldset>

Radio Buttons

Radios

Option 1
Option 2

HTML

									
										<fieldset>
    <legend>Radios</legend>
    <ul class="choices">
        <li>
            <label>
                <input name="radio" type="radio" class="radio">
                Option 1
            </label>
        </li>
        <li>
            <label>
                <input name="radio" type="radio" class="radio">
                Option 2
            </label>
        </li>
    </ul>
</fieldset>

Select Menu

Select

HTML

									
										<label for="select">Select</label>
<select id="select" class="textInput">
    <option value="">Select One</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
</select>

Html5 Inputs

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

HTML

									
											<fieldset>
    <div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
    <div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
    <div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
    <div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
    <div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
    <div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
    <div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
    <div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>