Forms

With Foundation, we set out to create an easy to handle, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.

Fieldset

Input Label

Input Label

Input Label

Input Label

.com

Textarea Label

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.

Error Invalid entry

Another Error Invalid entry

Invalid entry

Custom Forms

It's so crazy easy to create easy-to-style custom forms. It's practically a crime.

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Medium Example This is a dropdown This is another option This is another option too Look, a third option

Switch

Switches can be used instead of regular radio buttons to switch between two options. They are customizable and use styles that won't show on phones that don't support media queries. On these devices, they will appear as regular radio buttons.