Inputs

Text

Input text help.

<input type="text" class="input" placeholder="text" />
<p class="input--help">Input text help.</p>

Disabled input text.

<input type="text" class="input" value="text" disabled />
<p class="input--help">Disabled input text.</p>

Input text required.

<input type="text" class="input input-validation-error" placeholder="text" />
<p class="field-validation-error">Input text required.</p>

Search

Input search help.

<input type="search" class="input" placeholder="search" />
<p class="input--help">Input search help.</p>

Disabled input search.

<input type="search" class="input" value="search" disabled />
<p class="input--help">Disabled input search.</p>

Input search required.

<input type="search" class="input input-validation-error" placeholder="search" />
<p class="field-validation-error">Input search required.</p>

Email

Input email help.

<input type="email" class="input" placeholder="email" />
<p class="input--help">Input email help.</p>

Disabled input email.

<input type="email" class="input" value="info@mercurynewmedia.com" disabled />
<p class="input--help">Disabled input email.</p>

Input email required.

<input type="email" class="input input-validation-error" placeholder="email" />
<p class="field-validation-error">Input email required.</p>

URL

Input url help.

<input type="url" class="input" placeholder="url" />
<p class="input--help">Input url help.</p>

Disabled input url.

<input type="url" class="input" value="http://www.mercurynewmedia.com" disabled />
<p class="input--help">Disabled input url.</p>

Input url required.

<input type="url" class="input input-validation-error" placeholder="url" />
<p class="field-validation-error">Input url required.</p>

Tel

Input tel help.

<input type="tel" class="input" placeholder="tel" />
<p class="input--help">Input tel help.</p>

Disabled input tel.

<input type="tel" class="input" value="tel" disabled />
<p class="input--help">Disabled input tel.</p>

Input tel required.

<input type="tel" class="input input-validation-error" placeholder="tel" />
<p class="field-validation-error">Input tel required.</p>

Password

Input password help.

<input type="password" class="input" placeholder="password" />
<p class="input--help">Input password help.</p>

Disabled input password.

<input type="password" class="input" value="password" disabled />
<p class="input--help">Disabled input password.</p>

Input password required.

<input type="password" class="input input-validation-error" placeholder="password" />
<p class="field-validation-error">Input password required.</p>

Number

Input number help.

<input type="number" class="input" placeholder="number" />
<p class="input--help">Input number help.</p>

Disabled input number.

<input type="number" class="input" value="1" disabled />
<p class="input--help">Disabled input number.</p>

Input number required.

<input type="number" class="input input-validation-error" placeholder="number" />
<p class="field-validation-error">Input number required.</p>

Datetime

Input datetime-local help.

<input type="datetime-local" class="input" />
<p class="input--help">Input datetime-local help.</p>

Disabled input datetime-local.

<input type="datetime-local" class="input" disabled />
<p class="input--help">Disabled input datetime-local.</p>

Input datetime-local required.

<input type="datetime-local" class="input input-validation-error" />
<p class="field-validation-error">Input datetime-local required.</p>

Date

Input date help.

<input type="date" class="input" />
<p class="input--help">Input date help.</p>

Disabled input date.

<input type="date" class="input" disabled />
<p class="input--help">Disabled input date.</p>

Input date required.

<input type="date" class="input input-validation-error" />
<p class="field-validation-error">Input date required.</p>

Month

Input month help.

<input type="month" class="input" />
<p class="input--help">Input month help.</p>

Disabled input month.

<input type="month" class="input" disabled />
<p class="input--help">Disabled input month.</p>

Input month required.

<input type="month" class="input input-validation-error" />
<p class="field-validation-error">Input month required.</p>

Week

Input week help.

<input type="week" class="input" />
<p class="input--help">Input week help.</p>

Disabled input week.

<input type="week" class="input" disabled />
<p class="input--help">Disabled input week.</p>

Input week required.

<input type="week" class="input input-validation-error" />
<p class="field-validation-error">Input week required.</p>

Time

Input time help.

<input type="time" class="input" />
<p class="input--help">Input time help.</p>

Disabled input time.

<input type="time" class="input" disabled />
<p class="input--help">Disabled input time.</p>

Input time required.

<input type="time" class="input input-validation-error" />
<p class="field-validation-error">Input time required.</p>

Color

Input color help.

<input type="color" class="input" />
<p class="input--help">Input color help.</p>

Disabled input color.

<input type="color" class="input" disabled />
<p class="input--help">Disabled input color.</p>

Input color required.

<input type="color" class="input input-validation-error" />
<p class="field-validation-error">Input color required.</p>

Textarea

Textarea help.

<textarea class="input" placeholder="textarea"></textarea>
<p class="input--help">Textarea help.</p>

Disabled textarea.

<textarea class="input" placeholder="textarea" disabled></textarea>
<p class="input--help">Disabled textarea.</p>

Textarea required.

<textarea class="input input-validation-error" placeholder="textarea"></textarea>
<p class="field-validation-error">Textarea required.</p>

Select

Select input help.

<select class="input">
    <option value="">Select an option...</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
</select>

Disabled select input.

<select class="input" disabled>
    <option value="">Select an option...</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
</select>

Select input required.

<select class="input input-validation-error">
    <option value="">Select an option...</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
</select>

Multiselect

Multiselect help.

<select multiple class="input">
    <option value="">Select an option...</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
</select>

Disabled multiselect.

<select multiple class="input" disabled>
    <option value="">Select an option...</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
</select>

Multiselect required.

<select multiple class="input input-validation-error">
    <option value="">Select an option...</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
</select>

Checkboxes

Base

Checkbox

<div class="checkboxes">
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
</div>

Disabled

Checkbox

<div class="checkboxes">
    <label class="checkbox--label disabled">
        <input type="checkbox" class="checkbox" disabled /> Checkbox
    </label>
</div>

Horizontal Checkboxes

Checkbox Checkbox Checkbox

<div class="checkboxes">
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
</div>

Vertical Checkboxes

Checkbox Checkbox Checkbox

<div class="checkboxes checkboxes--list">
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
    <label class="checkbox--label">
        <input type="checkbox" class="checkbox" /> Checkbox
    </label>
</div>

Radios

Base

Radio Radio

<div class="radios">
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-1" checked /> Radio
    </label>
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-1" /> Radio
    </label>
</div>

Disabled

Radio Radio

<div class="radios">
    <label class="radio--label disabled">
        <input type="radio" class="radio" name="radio-example-2" checked disabled /> Radio
    </label>
    <label class="radio--label disabled">
        <input type="radio" class="radio" name="radio-example-2" disabled /> Radio
    </label>
</div>

Horizontal Radios

Radio Radio Radio

<div class="radios">
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-3" checked /> Radio
    </label>
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-3" /> Radio
    </label>
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-3" /> Radio
    </label>
</div>

Vertical Radios

Radio Radio Radio

<div class="radios radios--list">
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-4" checked /> Radio
    </label>
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-4" /> Radio
    </label>
    <label class="radio--label">
        <input type="radio" class="radio" name="radio-example-4" /> Radio
    </label>
</div>