Rendered HTML

Input Label

Input Label

Input Label

Input Label

.com

Select Box

Choose Your FavoriteRedBlue

Check These OutCheckbox 1Checkbox 2

Textarea Label

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.

Rendered HTML

Label

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

Rendered HTML

Fieldset Legend

Input Label

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:

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.

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.

<labelid="ageLabel">Age</label><divclass="range-slider"data-slider><spanclass="range-slider-handle"role="slider"aria-labelledby="ageLabel"aria-describedby="ageHelpText"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div><pid="ageHelpText">How old are you?</p>

Sass Errors?

SCSS

Get a running start with Foundation

Learn the fundamentals of the world's most advanced responsive framework in our Intro to Foundation class. You'll learn from the creators themselves on how to use Foundation and jumpstart your next project. Learn more about classes »