Forms

A combination of form styles and the Foundation grid means you can do almost anything. Listed below are styles for individual form components as well as various layout guidelines.

Text Inputs

Below is the basic <input> element. On hover, its border color darkens.

<!-- Example input -->
<input type="text" placeholder="Your placeholder" />

Disabled state

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

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" />

Error State

To add an error state to your text-level <input>, simply add the .error class.

Invalid entry 
<!-- Text-level input error state applied directly -->
<input type="text" class="error" placeholder="Your placeholder" />
<small class="error">Invalid entry</small>

Or, you may add the .error class to a parent of your <input>. For example, below the .error class is added to a <label>.

Invalid entry 
<!-- Text-level input error state applied to parent -->
<label class="error">Input Label</label>
    <input type="text" class="error" placeholder="Your placeholder" />
<small class="error">Invalid entry</small>

Selects

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>

Disabled state

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>

Error state

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>...

Invalid entry 
<!-- Select error state applied directly -->
<select class="error">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
<select>
<small class="error">Invalid entry</small>

...or by adding the .error class to a parent of the <select>. (In the case below, a <label>.)

Invalid entry 
<!-- Select error state applied to parent -->
<label class="error">Select Label</label>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
<select>
<small class="error">Invalid entry</small>

Textareas

The <textarea> element will inherit the same theme-properties as the text-level input.

<!-- Example textarea -->
<textarea placeholder="Example placeholder"></textarea>

Disabled State

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>

Error State

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...

<!-- Textarea error applied directly -->
<textarea class="error" placeholder="Example placeholder"></textarea>

...or by applying the .error class to a parent of the <textarea>.

<!-- Textarea error applied to parent -->
<label class="error">Textarea label</label>
<textarea placeholder="Example placeholder"></textarea>

Multi Control Elements

NOTE: Styled radio buttons and checkboxes are custom to LV-Foundation - please do not seek documentation on the Foundation website.

Radio buttons have been styled for you! Check it out!

<!-- Example radio-button set -->
<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>

So have checkboxes!

<!-- Example checkbox set -->
<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>

Field Labels

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>

Error Messages

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.

Please select at least one option. 
<!-- Example checkbox set with error message-->
<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>

Pre/Postfix Labels & Actions

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.

http:// 
<!-- 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.

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>
NOTE: The .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.

Error States

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.

http://
Your url is invalid. 
<!-- 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>

Pre/Postfix Actions

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.

Go
Go 
<!-- 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!

Go 
<!-- 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>

Example Modal

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.