An example form:
<form>
<div class="row">
<div class="large-12 columns md-text-field with-floating-label">
<input type="text" id="input_1" required>
<label for="input_1">Floating Label Text</label>
</div>
</div>
<div class="row">
<div class="large-12 columns md-text-field with-floating-label">
<input type="password" id="input_15" required>
<label for="input_15">Floating Label Password</label>
</div>
</div>
<div class="row">
<div class="large-4 columns md-text-field with-floating-label">
<input type="text" id="input_2" required>
<label for="input_2">large-4.columns</label>
</div>
<div class="large-4 columns md-text-field with-floating-label">
<input type="text" id="input_3" required>
<label for="input_3">large-4.columns</label>
</div>
<div class="large-4 columns md-text-field with-floating-label">
<input type="text" id="input_4" required>
<label for="input_4">large-4.columns</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="uitk-select md-text-field with-floating-label">
<input type="text" class="select-input" readonly="true" value="Select an Option" required>
<span class="select-arrow"></span>
<ul class="select-dropdown">
<li class="disabled"><span>Select an Option</span></li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<label>Select Box Label</label>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row collapse">
<label>Prefix Select Box</label>
<div class="small-3 large-2 columns md-text-field with-floating-label">
<div class="uitk-select">
<input type="text" class="select-input" readonly="true" value="Husker" required>
<span class="select-arrow"></span>
<ul class="select-dropdown">
<li>Husker</li>
<li>Starbuck</li>
<li>Hot Dog</li>
<li>Apollo</li>
</ul>
</div>
</div>
<div class="small-9 large-10 columns md-text-field with-floating-label">
<input type="text" id="input_5" required>
<label for="input_5">Enter your URL...</label>
</div>
</div>
</div>
<div class="large-12 columns">
</div>
</div>
<div class="row">
<div class="large-6 columns md-multi-ctrl-field">
<label>Choose Your Favorite</label>
<input id="pokemonRed" name="pokemon" type="radio" value="Red">
<label for="pokemonRed">Red</label>
<input id="pokemonBlue" name="pokemon" type="radio" value="Blue">
<label for="pokemonBlue">Blue</label>
</div>
<div class="large-6 columns md-multi-ctrl-field">
<label>Check these out</label>
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="md-textarea-field with-floating-label">
<textarea type="text" id="input_6" rows="3" required></textarea>
<label for="input_6">Standard Textarea Field</label>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="md-textarea-field with-floating-label md-textarea--autoresize">
<textarea data-autoresize="" rows="1" type="text" id="input_7" required></textarea>
<label for="input_7">Multi-line Expanding Text Field</label>
</div>
</div>
</div>
</form>
Done correctly, you can put together a form like this one:
<form>
<div class="row">
<div class="large-12 columns">
<label>Input Label</label>
<input type="text" placeholder="Your placeholder">
</div>
</div>
<div class="row">
<div class="large-4 columns">
<label>Input Label</label>
<input placeholder="large-4.columns" type="text">
</div>
<div class="large-4 columns">
<label>Input Label</label>
<input placeholder="large-4.columns" type="text">
</div>
<div class="large-4 columns">
<div class="row collapse">
<label>Input Label</label>
<div class="small-9 columns">
<input class="with-postfix" placeholder="small-9.columns" type="text">
</div>
<div class="small-3 columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Select Box</label>
<select>
<option value="husker">
Husker
</option>
<option value="starbuck">
Starbuck
</option>
<option value="hotdog">
Hot Dog
</option>
<option value="apollo">
Apollo
</option>
</select>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row collapse">
<label>Prefix Select Box</label>
<div class="small-3 large-2 columns">
<select class="prefix">
<option value="husker">
Husker
</option>
<option value="starbuck">
Starbuck
</option>
<option value="hotdog">
Hot Dog
</option>
<option value="apollo">
Apollo
</option>
</select>
</div>
<div class="small-9 large-10 columns">
<input class="with-prefix" type="text" placeholder="Enter your URL...">
</div>
</div>
</div>
<div class="large-12 columns">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Choose Your Favorite</label>
<input id="pokemonRed" name="pokemon" type="radio" value="Red">
<label for="pokemonRed">Red</label>
<input id="pokemonBlue" name="pokemon" type="radio" value="Blue">
<label for="pokemonBlue">Blue</label>
</div>
<div class="large-6 columns">
<label>Check these out</label>
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Textarea Label</label>
<textarea placeholder="small-12.columns"></textarea>
</div>
</div>
</form>
Below is the basic <input> element with class .md-text-field. On focus the underline changes to the active color.
<!-- Example input -->
<div class="md-text-field">
<input type="text" placeholder="Placeholder Text">
</div>
Below is the basic <input> element. On hover, its border color darkens.
<!-- Example input -->
<input type="text" placeholder="Your placeholder">
To disable your button and add disabled styles, add the
[disabled] attribute as seen below.
<!-- Disabled input -->
<div class="md-text-field">
<input type="text" placeholder="Placeholder Text" disabled>
</div>
To disable your button (thus adding disabled styles), simply add the
[disabled] attribute as seen below.
<!-- Disabled input -->
<input type="text" placeholder="Your placeholder" disabled>
Field labels should follow the material design floating label component. There are a few requirements to make the labels work.
.with-floating-label to the .md-text-field wrapper. Then create a <label> element directly below <input>.<input> must also contain an id attribute that matches the for attribute on it's associated <label> element.required attribute is needed for CSS recognize when the input is focused. If the input is not required you can manually add the class .has-focus onClick..has-success after the checking the value to keep the label floating.Helper text can also be placed below the field line for additional text to help the user correctly complete the form. Add <span> or <label> element last in the .md-text-field container with the class .info. (Note, the <label> element should only be used for helper text if a primary label is already provided.)
<!-- With required attribute -->
<div class="md-text-field with-floating-label">
<input type="text" id="input_8" required>
<label for="input_8">Floating Label Text</label>
</div>
<!-- With has-focus classes -->
<div class="md-text-field with-floating-label">
<input type="text" id="input_9" class="has-focus">
<label for="input_9">Floating Label Text</label>
</div>
<!-- With helper text classes -->
<div class="md-text-field with-floating-label">
<input type="text" id="input_16" required>
<label for="input_16">Floating Label Text</label>
<span class="info">Helper text</span>
</div>
To add a label to your <input>, use a <label> element and supply
label text as follows.
<label>Input Label</label>
<input type="text" placeholder="Your placeholder">
To add an error state to your text-input <input>, add the
.has-error class. Similar to the helper text, error messages can be placed in <span> or <label> last in the .md-text-field container with the class .error. (Note, the <label> element should only be used for error text if a primary label is already provided.)
<!-- Text-level input error state applied directly -->
<div class="md-text-field with-floating-label">
<input type="text" id="input_10" class="has-error" value="Field Input Text" required>
<label for="input_10">Floating Label Text</label>
<span class="error">Invalid entry</span>
</div>
To add an error state to your text-level <input>, add the
.error class.
Alternatively, you can add the .error class to a parent of your <input>. For
example, below the .error class is added to parent <div>.
<!-- Text-level input error state applied directly -->
<input type="text" class="error" placeholder="Your placeholder">
<small class="error">Invalid entry</small>
<!-- Text-level input error state applied to parent -->
<div class="error">
<label class="error">Input Label</label>
<input type="text" placeholder="Your placeholder">
<small class="error">Invalid entry</small>
</div>
Material Design select dropdowns are essentially menus. An input will hold the selected value, while an ul will hold the options. There is a jQuery example in the code area that for controlling the select box.
If you already have select elements, you can write a plugin to hide the <select> element and rewrite it with the input and ul or simply replace any <select> element in your code with the markup shown below.
<!-- Example select dropdown -->
<div class="uitk-select md-text-field with-floating-label">
<input type="text" class="select-input" readonly="true" value="Select an Option" required>
<span class="select-arrow"></span>
<ul class="select-dropdown">
<li class="disabled"><span>Select an Option</span></li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<label>Select Box Label</label>
</div>
<!-- jQuery Example select dropdown -->
<script src="">
// Open dropdown when input clicked
$('.select-input').click(function() {
$(this).parents('.uitk-select').toggleClass('is-open');
});
// If dropdown li not disabled set to active and add text to input
$('.select-dropdown > li:not(.disabled)').click(function() {
var $selectParent = $(this).parents('.uitk-select');
var $liCheckbox;
var checkedValues = '';
$(this).toggleClass('active');
if ($selectParent.hasClass('multiple')) {
$liCheckbox = $(this).find('input[type="checkbox"]');
$liCheckbox.prop('checked', !$liCheckbox.prop('checked'));
checkedValues = $selectParent.find('input:checkbox:checked').map(function() {
return $(this).siblings('span').text();
}).get().join(', ');
$selectParent.find('.select-input').val(checkedValues);
} else {
checkedValues = $(this).text();
$selectParent.find('.select-input').val(checkedValues);
$(this).siblings().removeClass('active');
$selectParent.removeClass('is-open');
}
});
// Checkbox in multiple selects will be checked by clicking on the li
$('.select-dropdown > li input[type="checkbox"]').click(function(e){
e.stopPropagation();
});
// Close dropdowns if clicked outside uitk-select
$(document).click(function (e) {
e.stopPropagation();
if ($(".uitk-select").has(e.target).length === 0) {
$(".uitk-select").removeClass('is-open');
}
});
</script>
For accessibility reason, some apps may need to keep the native OS HTML select. Instead of using the <input> + <ul> dropdown, the regular <select> element is still available. While not open the element will look the similar to the fully styled select box. While open it will use the OS native styling which cannot be changed with CSS.
<div class="uitk-select md-text-field with-floating-label">
<select class="os-default">
<option disabled selected value="">Select an Option</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
<span class="select-arrow"></span>
<label>Select Box Label</label>
</div>
Below is the basic <select> element, which appears very similarly to the
<input> above.
<!-- Example select -->
<select>
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
<option value="Meliore">Meliore</option>
</select>
You may apply the .multiple class your .uitk-select wrapper to allow more than one option to
be selected.
<!-- Multiple select -->
<div class="uitk-select multiple md-text-field with-floating-label">
<input type="text" class="select-input" readonly="true" value="Select an Option" required>
<span class="select-arrow"></span>
<ul class="select-dropdown md-multi-ctrl-field">
<li class="disabled"><span>Select an Option</span></li>
<li><input name="multiple-select-checkbox" type="checkbox"><span>Option 1</span></li>
<li><input name="multiple-select-checkbox" type="checkbox"><span>Option 2</span></li>
<li><input name="multiple-select-checkbox" type="checkbox"><span>Option 3</span></li>
</ul>
<label>Select Box Label</label>
</div>
You may apply the multiple attribute your select to allow more than one option to
be selected. Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.
<!-- Multiple select -->
<select multiple>
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
<option value="Meliore">Meliore</option>
</select>
You may disable the select dropdown by adding the [disabled] attribute to the .select-input <input> element.
<!-- Disabled select dropdown -->
<div class="uitk-select md-text-field with-floating-label">
<input type="text" class="select-input" readonly="true" value="Select an Option" disabled>
<span class="select-arrow"></span>
<ul class="select-dropdown">
<li class="disabled"><span>Select an Option</span></li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<label>Select Box Label</label>
</div>
You may disable your select as you disable a text-level input with the
[disabled] attribute.
<!-- Disabled select -->
<select disabled>
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
<option value="Meliore">Meliore</option>
</select>
You may apply an error-state to the <input> just as you would a
text-level <input> by adding the .has-error class.
<!-- Select error state applied directly -->
<div class="uitk-select md-text-field with-floating-label">
<input type="text" class="has-error select-input" readonly="true" value="Select an Option">
<span class="select-arrow"></span>
<ul class="select-dropdown">
<li class="disabled"><span>Select an Option</span></li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<label>Select Box Label</label>
<span class="error">Invalid entry</span>
</div>
You may apply an error-state to your <select> just as you would a
text-level <input> - either by adding the .error class to the <select> ...or by adding the .error class to a parent of the <select>. (In
the case below, a <label>.)
<!-- Select error state applied directly -->
<select class="error">
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
<option value="Meliore">Meliore</option>
</select>
<small class="error">Invalid entry</small>
<!-- Select error state applied to parent -->
<label class="error">Select Label</label>
<select>
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
<option value="Meliore">Meliore</option>
</select>
<small class="error">Invalid entry</small>
<textarea> inputs should be wrapped in the .md-textarea-field .with-floating-label classes. There are two types of <textarea> elements available. The standard <textarea> is contained by a box border and wrap overflow text onto a new line. They scroll vertically when the cursor reaches the bottom of the field.
<!-- Example textarea -->
<div class="md-textarea-field with-floating-label">
<textarea type="text" id="input_11" rows="2" required></textarea>
<label for="input_11">Textarea Floating Label</label>
</div>
The expanding multi-line <textarea> looks like a regular text <input> but the bottom will drop down when a new line is needed. Styles are provided for the expanding textarea by adding the class .md-textarea--autoresize to the .md-textarea-field wrapper.
There is a jQuery example in the code area that looks for a [data-autoresize] attribute on the <textarea> to bind the autoresize method to it.
<!-- Example expanding multi-line textarea -->
<div class="md-textarea-field with-floating-label md-textarea--autoresize">
<textarea data-autoresize="" rows="1" type="text" id="input_12" required></textarea>
<label for="input_12">Textarea Floating Label</label>
</div>
<!-- jQuery Example expanding multi-line textarea -->
<script src="">
// jQuery Example: Control Multi-line text areas
$.each($('.md-textarea-field textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
$(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
$(this).on('keyup input', function() {
resizeTextarea(this);
}).removeAttr('data-autoresize');
});
</script>
The <textarea> element will inherit the same theme-properties as the
text-level input.
<!-- Example textarea -->
<textarea placeholder="Example placeholder"></textarea>
You may add a disabled state to a <textarea> just as you would to a
text-level <input> by applying the [disabled] attribute.
<!-- Disabled textarea -->
<div class="md-textarea-field with-floating-label">
<textarea type="text" id="input_13" rows="2" disabled></textarea>
<label for="input_13">Textarea Label</label>
</div>
You may add a disabled state to a <textarea> just as you would to a
text-level <input> by applying the [disabled] attribute.
<!-- Disabled textarea -->
<textarea disabled placeholder="Example placeholder"></textarea>
You may add an error state to your <textarea> just as you would to a
text-level input, by applying the .has-error class.
<!-- Textarea error applied directly -->
<div class="md-textarea-field with-floating-label">
<textarea type="text" id="input_14" class="has-error" rows="2" required></textarea>
<label for="input_14">Textarea Label</label>
</div>
You may add an error state to your <textarea> just as you would to a
text-level input, either by applying the .error class directly or by applying the .error class to a parent of the <textarea>.
<!-- Textarea error applied directly -->
<textarea class="error" placeholder="Example placeholder"></textarea>
<!-- Textarea error applied to parent -->
<label class="error">Textarea label</label>
<textarea placeholder="Example placeholder"></textarea>
Radio buttons have been styled for you! Check it out!
<!-- Example radio-button set -->
<div class="md-multi-ctrl-field">
<input name="radio-example" id="radio-example-1" type="radio">
<label for="radio-example-1">Example Radio 1</label>
<input name="radio-example" id="radio-example-2" type="radio">
<label for="radio-example-2">Example Radio 2</label>
<input name="radio-example" id="radio-example-3" type="radio">
<label for="radio-example-3">Example Radio 3</label>
</div>
So have checkboxes!
<!-- Example checkbox set -->
<div class="md-multi-ctrl-field">
<input name="checkbox-example" id="checkbox-example-1a" type="checkbox">
<label for="checkbox-example-1a">Example Checkbox 1</label>
<input name="checkbox-example" id="checkbox-example-2a" type="checkbox">
<label for="checkbox-example-2a">Example Checkbox 2</label>
<input name="checkbox-example" id="checkbox-example-3a" type="checkbox">
<label for="checkbox-example-3a">Example Checkbox 3</label>
</div>
You may add a form-field label to a multi-control set just as you would to any
other form element with a <label> element.
<!-- Example checkbox set with label -->
<label>Example checkbox labels</label>
<input name="checkbox-example" id="checkbox-example-1b" type="checkbox">
<label for="checkbox-example-1b">Example Checkbox 1</label>
<input name="checkbox-example" id="checkbox-example-2b" type="checkbox">
<label for="checkbox-example-2b">Example Checkbox 2</label>
<input name="checkbox-example" id="checkbox-example-3b" type="checkbox">
<label for="checkbox-example-3b">Example Checkbox 3</label>
While the multi-controls themselves do not have error states, you may supply an
error message just as you would to any other form element with a <small>
element with the .error class.
<!-- Example checkbox set with error message-->
<div class="md-multi-ctrl-field">
<input name="checkbox-example" id="checkbox-example-1" type="checkbox">
<label for="checkbox-example-1">Example checkbox 1</label>
<input name="checkbox-example" id="checkbox-example-2" type="checkbox">
<label for="checkbox-example-2">Example Radio 2</label>
<input name="checkbox-example" id="checkbox-example-3" type="checkbox">
<label for="checkbox-example-3">Example Radio 3</label>
<small class="error">Please select at least one option.</small>
</div>
Prefix-Postfix Labels are coming soon for new Material Design forms. You can use the Select Box as a prefix without any additional classes as shown in the example at the top of this page.
Below is an example of serving a label alongside a text-input.
This is achieved by using the .prefix class on the label to denote its
position relative to the input it is labeling. Note that the input itself also
has the .with-prefix class. In addition, the label and the input are
displayed within a Foundation sub-grid, used to determine the size of the label
relative to the input.
<!-- Example label prefix -->
<div class="row collapse">
<div class="small-3 large-2 columns">
<span class="prefix">http://</span>
</div>
<div class="small-9 large-10 columns">
<input class="with-prefix" type="text" placeholder="Enter your URL...">
</div>
</div>
While the .prefix class is used to denote a label that prefixes the input,
the .postfix class can be used to a similar effect for postfixing an input
with a label.
<!-- Example label postfix -->
<div class="row collapse">
<div class="small-9 large-10 columns">
<input class="with-postfix" type="text" placeholder="Your placeholder">
</div>
<div class="small-3 large-2 columns">
<span class="postfix">Label</span>
</div>
</div>
.with-prefix and .with-postfix
classes are specific to LV-Foundation. As such, this documentation will
differ from that which you will find on the Foundation website.
Selects may also be labeled as .prefix and .postfix classes. They can be used
most commonly alongside text inputs as shown in this example.
<!-- Example label postfix -->
<div class="row">
<div class="small-12 columns">
<div class="row collapse">
<label>Prefix Select Box</label>
<div class="small-3 large-2 columns">
<select class="prefix">
<option value="husker">
Husker
</option>
<option value="starbuck">
Starbuck
</option>
<option value="hotdog">
Hot Dog
</option>
<option value="apollo">
Apollo
</option>
</select>
</div>
<div class="small-9 large-10 columns">
<input class="with-prefix" type="text" placeholder="Enter your URL...">
</div>
</div>
</div>
<div class="large-12 columns">
</div>
</div>
.with-prefix and .with-postfix
classes are specific to LV-Foundation. As such, this documentation will
differ from that which you will find on the Foundation website.
You may add an error state to your text-level input with a pre/postfix label by
adding the .error class to a parent of both the input and the label.
<!-- Example label prefix -->
<div class="row collapse error">
<div class="small-3 large-2 columns">
<span class="prefix">http://</span>
</div>
<div class="small-9 large-10 columns">
<input class="with-prefix" type="text" placeholder="Enter your URL...">
<small class="error">Your url is invalid.</small>
</div>
</div>
If you wish to tie a form-field to a specific action, you may want to prefix or
postfix your input with a button rather than a standard label.
<!-- Example Action prefix -->
<div class="row collapse">
<div class="small-3 large-2 columns">
<a href="#" class="prefix button">Go</a>
</div>
<div class="small-9 large-10 columns">
<input class="with-prefix" type="text" placeholder="Value">
</div>
</div>
<!-- Example Action postfix -->
<div class="row collapse">
<div class="small-9 large-10 columns">
<input class="with-postfix" type="text" placeholder="Value">
</div>
<div class="small-3 large-2 columns">
<a href="#" class="postfix button">Go</a>
</div>
</div>
If you would like your button to assist with showing an error state, feel free to use the error button!
<!-- Example label prefix -->
<div class="row collapse error">
<div class="small-3 large-2 columns">
<a href="#" class="prefix button alert">Go</a>
</div>
<div class="small-9 large-10 columns">
<input class="with-prefix" type="text" placeholder="Value">
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Forms
A combination of form styles and the grid means you can do almost anything. Listed below are styles for individual form components as well as various layout guidelines.