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:

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

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.

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

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.

<form>
  <div class="row">
    <div class="small-8 columns">
      <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>

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.

<form>
  <fieldset>
    <legend>Fieldset Legend</legend>

    <label>Input Label
      <input type="text" placeholder="Inputs and other form elements go inside...">
    </label>
  </fieldset>
</form>

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

You can also give a button / input pair a radius or a rounded edge by adding the classes prefix-radius, postfix-radius, prefix-round or postfix-round to the row that contains the elements. For example, <div class="row collapse postfix-round"> will add a rounded edge to the left side of the input field, and to the right side of the button, creating a cohesive rounded input. Here are a few examples:

<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-12 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>
  <div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">Label</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <span class="postfix">Label</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-round">
        <div class="small-3 columns">
          <a href="#" class="button prefix">Go</a>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-round">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <a href="#" class="button postfix">Go</a>
        </div>
      </div>
    </div>
  </div>
</form>

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.

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

Accessibility

For the most part, if you stick to standard HTML input types and label them properly, you won't need to worry too much about accessibility. Here are some things to keep in mind.

Label your inputs

We recommend nesting your inputs inside of their labels, which removes the need to connect them using the for attribute.

<label>
  Name
  <input type="text" name="name">
</label>

If you need your labels and inputs to be separated, make sure the two are connected so screen readers will know (and to keep the labels clickable!).

<label for="name">Name</label>
<input type="text" name="name" id="name">

If an input field doesn't have a label, add the attribute aria-label to the input to clarify its purpose.

<input type="text" name="name" aria-label="Name">

Label help text

If an input has some sort of help text distinct from the label, it should be connected to the input it describes using the attribute aria-describedby.

<label>
  Name
  <input type="text" name="name" aria-describedby="nameHelpText">
</label>
<p id="nameHelpText">Enter your name.</p>

Label custom inputs

Custom inputs, like date pickers, range sliders, or switches need some extra attention to be made accessible. Our custom inputs—the range slider and switch—do most of this work for you.

Custom inputs with labels or help text need the attributes aria-labelledby and aria-describedby added to them, so screen readers know how to describe a custom input.

<label id="ageLabel">Age</label>
<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>
<p id="ageHelpText">How old are you?</p>

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: $font-weight-normal;
$form-label-line-height: 1.5;
$form-label-font-color: scale-color($black, $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: $white;
$input-focus-bg-color: scale-color($white, $lightness: -2%);
$input-border-color: scale-color($white, $lightness: -20%);
$input-focus-border-color: scale-color($white, $lightness: -40%);
$input-border-style: solid;
$input-border-width: 1px;
$input-border-radius: $global-radius;
$input-disabled-bg: $gainsboro;
$input-disabled-cursor: $cursor-default-value;
$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: $gainsboro;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);

// We use these to style the legends when you use them
$legend-bg: $white;
$legend-font-weight: $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($white, $lightness: -5%);
$input-prefix-border-color: scale-color($white, $lightness: -20%);
$input-prefix-border-size: 1px;
$input-prefix-border-type: solid;
$input-prefix-overflow: hidden;
$input-prefix-font-color: $oil;
$input-prefix-font-color-alt: $white;

// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
$input-number-spinners: true;

// We use these to style the error states for inputs and labels
$input-error-message-padding: rem-calc(6 9 9);
$input-error-message-top: -1px;
$input-error-message-font-size: rem-calc(12);
$input-error-message-font-weight: $font-weight-normal;
$input-error-message-font-style: italic;
$input-error-message-font-color: $white;
$input-error-message-bg-color: $alert-color;
$input-error-message-font-color-alt: $oil;

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

// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
// $input-transition-fade-time: 0.15s;
// $input-transition-fade-timing-function: linear;

// Select variables
$select-bg-color: $ghost;
$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);

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

.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

.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);
}

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