---
name: forms
url: /forms
title: Forms
---
Forms
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 (grid-block and grid-content).
You can size inputs using column sizes, like .large-6
, .small-6.
You can create grid-block elements inside your form and use grid-content for the form, including inputs, labels and more. Grid-block's 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:
You can create a Form with this basic HTML:
Pre/Postfix Labels & Buttons
You can attach labels before or after the form input. Wrap the input with a class of inline-label
then use the form-label
class on the label. Buttons just need the inline-label
class. Example HTML:
Switch
Switches are toggle element that switch between an Off and On state on tap or click. They make use of checkbox inputs (or radio buttons) and require no JavaScript.
Range Slider
You can make a fancy Range slider with this simple markup:
Number Input
The Number input is used for input fields that should contain a numeric value:
Meter & Progress Elements
Progress
The Progress element is used to display the progress of a task.
Meter
The Meter element is used to display a measurement on a known scale. For example, like a volume or capacity of a venue or hard-drive. The maximum and minimum are known in advance. Not supported in Internet Explorer.
Sass Variables
You can customize Form elements including Switch, Range Slider, and Progress/Meter with these variables:
// Basic form variables
$form-fontsize: 1rem;
$form-padding: 0.5rem;
// Text fields
$input-color: #000;
$input-color-hover: $input-color;
$input-color-focus: $input-color;
$input-background: #fff;
$input-background-hover: $input-background;
$input-background-focus: $input-background;
$input-border: 1px solid #ccc;
$input-border-hover: 1px solid #bbb;
$input-border-focus: 1px solid #999;
// Select menus
$select-color: #000;
$select-background: #fafafa;
$select-background-hover: smartscale($select-background, 4%);
$select-arrow: true;
$select-arrow-color: $select-color;
// Labels
$label-fontsize: 0.9rem;
$label-margin: 0.5rem;
$label-color: #333;
// Inline labels
$inlinelabel-color: #333;
$inlinelabel-background: #eee;
$inlinelabel-border: $input-border;
// - - - - - - - - - - - - - - - - - - - - - - - - -
// Range slider
$slider-background: #ddd;
$slider-height: 1rem;
$slider-radius: 0px;
$slider-thumb-height: 1.5rem;
$slider-thumb-color: $primary-color;
$slider-thumb-radius: 0px;
// - - - - - - - - - - - - - - - - - - - - - - - - -
// Progress and Meter
$meter-height: 1.5rem;
$meter-background: #ccc;
$meter-fill: $primary-color;
$meter-fill-high: $success-color;
$meter-fill-medium: #e7cf00;
$meter-fill-low: $alert-color;
$meter-radius: 0;
// - - - - - - - - - - - - - - - - - - - - - - - - -
// Switch
$switch-width: rem-calc(50);
$switch-height: rem-calc(32);
$switch-background: #ccc;
$switch-background-active: $primary-color;
$switch-border: 0;
$switch-radius: 9999px;
$switch-animation-speed: 0.15s;
$switch-paddle-color: white;
$switch-paddle-offset: 4px;