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 <input type="text" placeholder="large-12.columns" /> </label> </div> </div> <div class="row"> <div class="large-4 columns"> <label>Input Label <input type="text" placeholder="large-4.columns" /> </label> </div> <div class="large-4 columns"> <label>Input Label <input type="text" placeholder="large-4.columns" /> </label> </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 <select> <option value="husker">Husker</option> <option value="starbuck">Starbuck</option> <option value="hotdog">Hot Dog</option> <option value="apollo">Apollo</option> </select> </label> </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">Red</label> <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><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 <textarea placeholder="small-12.columns"></textarea> </label> </div> </div> </form>

Rendered HTML

.com

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 <input type="text" placeholder="Inputs and other form elements go inside..."> </label> </fieldset> </form>

Rendered HTML

Fieldset Legend

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

http://
Go
Label

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 <input type="text" class="error" /> </label> <small class="error">Invalid entry</small> </div> <div class="large-6 columns error"> <label>Another Error <input type="text" /> </label> <small class="error">Invalid entry</small> </div> </div> <textarea class="error" placeholder="Message..."></textarea> <small class="error">Invalid entry</small> </form>

Rendered HTML

Invalid entry
Invalid entry
Invalid entry

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-line-height: 1.5; $form-label-font-color: scale-color(#000, $lightness: 30%); $form-label-small-transform: capitalize; $form-label-bottom-margin: 0; $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-border-radius: $global-radius; $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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »