Forms
We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do almost anything.
Building Forms With HTML
Creating a form in Foundation is designed to be easy but extremely flexible. Forms are built with a combination of standard form elements, as well as the Grid (rows and columns).
Form elements in Foundation are styled based on their type attribute rather than a class, and can be sized in a couple of ways:
- You can size inputs using column sizes, like
.large-6,.small-6. - You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.
This is an example form we've created that is laid out using the grid:
HTML
<form>
<div class="row">
<div class="large-12 columns">
<label>Input Label</label>
<input type="text" placeholder="large-12.columns" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 columns">
<div class="row collapse">
<label>Input Label</label>
<div class="small-9 columns">
<input type="text" placeholder="small-9.columns" />
</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="large-6 columns">
<label>Choose Your Favorite</label>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</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>Rendered HTML
Inline Labels
Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can put the label inside a different column to the left of the input. Then add a class of .right to the label to have it align to the right.
HTML
<form>
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right">Label</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Inline Text Input">
</div>
</div>
</div>
</div>
</form>Rendered HTML
Adding a class of .inline will have it vertically center against an input. You can use one or both of these classes to accomplish the look you want.
HTML
<form>
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Label</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Inline Text Input">
</div>
</div>
</div>
</div>
</form>Rendered HTML
Defining a Fieldset
We don't see them too much, but one of the useful form elements included with Foundation is <fieldset>. This is used as a wrapper right inside the form element. Right after you define a fieldset, you can include a legend title by using <legend>. Here's some HTML to help make copy paste.
HTML
<form>
<fieldset>
<legend>Fieldset Legend</legend>
<label>Input Label</label>
<input type="text" placeholder="Inputs and other form elements go inside...">
</fieldset>
</form>Rendered HTML
Pre/Postfix Labels & Actions
Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use <div class="row collapse"> to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix <span class="postfix"> or <span class="prefix">. Here are a few examples:
HTML
<form>
<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 type="text" placeholder="Enter your URL...">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<div class="small-10 columns">
<input type="text" placeholder="Hex Value">
</div>
<div class="small-2 columns">
<a href="#" class="button postfix">Go</a>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row collapse">
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
<div class="small-3 columns">
<span class="postfix radius">Label</span>
</div>
</div>
</div>
</div>
</form>Rendered HTML
You'll notice that on the last postfix element, we've included the class of radius. This adds the border radius on the appropriate edge depending on whether it's a prefix or a postfix element. You can even include buttons with these styles, just apply the .button as well as the pre/postfix class.
Error States
Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically. You can attach a class of .error either to the individual elements (label, input, small) or to a column/div.
HTML
<form>
<div class="row">
<div class="large-6 columns">
<label class="error">Error</label>
<input type="text" class="error" />
<small class="error">Invalid entry</small>
</div>
<div class="large-6 columns error">
<label>Another Error</label>
<input type="text" />
<small>Invalid entry</small>
</div>
</div>
<textarea class="error" placeholder="Message..."></textarea>
<small class="error">Invalid entry</small>
</form>Rendered HTML
Customize With Sass
Forms can be easily customized with our provided Sass variables.
SCSS
$include-html-form-classes: $include-html-classes;
// We use this to set the base for lots of form spacing and positioning styles
$form-spacing: rem-calc(16);
// We use these to style the labels in different ways
$form-label-pointer: pointer;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: 500;
$form-label-font-color: scale-color(#000, $lightness: 30%);
$form-label-bottom-margin: rem-calc(3);
$input-font-family: inherit;
$input-font-color: rgba(0,0,0,0.75);
$input-font-size: rem-calc(14);
$input-bg-color: #fff;
$input-focus-bg-color: scale-color(#fff, $lightness: -2%);
$input-border-color: scale-color(#fff, $lightness: -20%);
$input-focus-border-color: scale-color(#fff, $lightness: -40%);
$input-border-style: solid;
$input-border-width: 1px;
$input-disabled-bg: #ddd;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
$input-include-glowing-effect: true;
// We use these to style the fieldset border and spacing.
$fieldset-border-style: solid;
$fieldset-border-width: 1px;
$fieldset-border-color: #ddd;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
// We use these to style the legends when you use them
$legend-bg: #fff;
$legend-font-weight: bold;
$legend-padding: rem-calc(0 3);
// We use these to style the prefix and postfix input elements
$input-prefix-bg: scale-color(#fff, $lightness: -5%);
$input-prefix-border-color: scale-color(#fff, $lightness: -20%);
$input-prefix-border-size: 1px;
$input-prefix-border-type: solid;
$input-prefix-overflow: hidden;
$input-prefix-font-color: #333;
$input-prefix-font-color-alt: #fff;
// We use these to style the error states for inputs and labels
$input-error-message-padding: rem-calc(6 4);
$input-error-message-top: 0;
$input-error-message-font-size: rem-calc(12);
$input-error-message-font-weight: bold;
$input-error-message-font-color: #fff;
$input-error-message-font-color-alt: #333;
// We use this to style the glowing effect of inputs when focused
$glowing-effect-fade-time: 0.45s;
$glowing-effect-color: $input-focus-border-color;Semantic Markup With Sass
You can create your own forms using our Sass mixins.
Pre/Postfix Mixin
You can use the prefix-postfix-base() and prefix() mixin to create your own form, like so:
Base mixin
SCSS
.custom-prefix-class {
@include prefix-postfix-base();
@include grid-column(
$columns:3,
$float:left
);
}
input[type="text"].custom-input-class {
@include grid-column($columns:9);
}<form>
<div class="row collapse">
<span class="custom-prefix-class">Label</span>
<input type="text" class="custom-input-class" placeholder="Value">
</div>
</form>Prefix & Postfix Style Mixins
We use this mixin to create prefix label styles
SCSS
.custom-prefix-class {
@include prefix-postfix-base();
@include prefix(
// Control the background color, which also effect the border and font color. Default:$input-prefix-bg (scale-color(#fff, $lightness: -5%))
$bg: $input-prefix-bg,
// Toggle position settings if prefix is a button. Default:false
$is-button: false
);
@include grid-column($columns:3,$float:left);
}
input[type="text"].custom-input-class {
@include grid-column($columns:9);
}HTML
<form>
<div class="row collapse">
<span class="custom-prefix-class">Label</span>
<input type="text" class="custom-input-class" placeholder="Value">
</div>
</form>Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/buttons";
@import "foundation/components/forms";