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.

Form Basics

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 grid rows and columns or cells.


Text Inputs

These input types create a text field: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, and week.

Watch this part in video

edit on codepen button

<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
    </div>
  </div>
</form>

Number Inputs

In most desktop browsers, <input type="number"> elements will have up/down controls inside them, which increment and decrement the number inside the field. These are called spin buttons. You can disable them by setting the $input-number-spinners Sass variable to false.

edit on codepen button
<label>
  How many puppies?
  <input type="number" value="100">
</label>

Text Areas

The <textarea> element creates a multi-line text input.

Watch this part in video

edit on codepen button
<label>
  What books did you read over summer break?
  <textarea placeholder="None"></textarea>
</label>

Select Menus

Use select menus to combine many choices into one menu.

Watch this part in video

edit on codepen button
<label>Select Menu
  <select>
    <option value="husker">Husker</option>
    <option value="starbuck">Starbuck</option>
    <option value="hotdog">Hot Dog</option>
    <option value="apollo">Apollo</option>
  </select>
</label>

Add the multiple attribute to allow more than one option to be selected. Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.

<label>Multiple Select Menu
  <select multiple>
    <option value="showboat">Showboat</option>
    <option value="redwing">Redwing</option>
    <option value="narcho">Narcho</option>
    <option value="hardball">Hardball</option>
  </select>
</label>

Checkboxes and Radio Buttons

Use groups of checkboxes when the user may select multiple choices from a list, and use radio buttons when the user must select just one choice.

Wrap a group of checkboxes or radio buttons in a <fieldset> element, and give them a common label using the <legend> element. Each individual control should also have its own label, created using a typical <label>.

Watch this part in video

edit on codepen button
<div class="grid-x grid-padding-x">
  <fieldset class="large-5 cell">
    <legend>Choose Your Favorite</legend>
    <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
    <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
    <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
  </fieldset>
  <fieldset class="large-7 cell">
    <legend>Check these out</legend>
    <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
    <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
  </fieldset>
</div>
Choose Your Favorite
Check these out

Fieldset Styles

To encourage their use as an accessibility tool, the <fieldset> element is no longer styled by default. Those styles are now contained in the .fieldset class.

Watch this part in video

edit on codepen button
<fieldset class="fieldset">
  <legend>Check these out</legend>
  <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
  <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
  <input id="checkbox32" type="checkbox"><label for="checkbox32">Checkbox 3</label>
</fieldset>
Check these out

Help Text (Accessibility)

Place help text below a field to clarify its purpose. Whenever you use help text, give the text a unique ID, and add the attribute aria-describedby to the input. Doing so associates the helper text to the input. A screen reader then can read the helper text when the user focusses on the input.

Watch this part in video

edit on codepen button
<label>Password
  <input type="password" aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p>

Your password must have at least 10 characters, a number, and an Emoji.


Label Positioning

Sometimes you want a form with labels to the left of your inputs. Piece of cake! You can put the label inside a different cell or column to the left of the input. Then use the class .text-right or .float-right (or add text-align: right yourself) to realign the label.

Watch this part in video

In a right-to-left environment, use .float-left instead.

edit on codepen button
<form>
  <div class="grid-x grid-padding-x">
    <div class="small-3 cell">
      <label for="right-label" class="text-right">Label</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="right-label" placeholder="Right-aligned text input">
    </div>
  </div>
</form>

Add the .middle class to vertically align the label with its input.

<form>
  <div class="grid-x grid-padding-x">
    <div class="small-3 cell">
      <label for="middle-label" class="text-right middle">Label</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
    </div>
  </div>
</form>

Inline Labels and Buttons

To attach extra text or controls to the left or right of an input field, wrap the elements in an .input-group container, then add these classes to the elements inside:

  • .input-group-field on the text field.
  • .input-group-label on a text label.
  • .input-group-button on a button. Place the button inside this wrapper.

Watch this part in video

This component supports flexbox mode. Learn how to enable flexbox mode.

edit on codepen button
<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>
$

File Upload Button

Use <input type="file"> to create a file upload button. For security reasons, most browsers don't let you style file inputs. To work around that, we can style a form label as a button, and point it to the <input>. To properly mask the input, the .show-for-sr class is added.

Watch this part in video

edit on codepen button
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

Custom Controls (Accessibility)

Custom form controls, like date pickers, range sliders, or switches need some extra attention to be made accessible. Our custom inputs, such as 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 the control.

<label id="ageLabel">Age</label>
<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<p id="ageHelpText">How old are you?</p>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$fieldset-border Border 1px solid $medium-gray

Default border around custom fieldsets.

$fieldset-padding Number rem-calc(20)

Default padding inside custom fieldsets.

$fieldset-margin Number rem-calc(18 0)

Default margin around custom fieldsets.

$legend-padding Number rem-calc(0 3)

Default padding between the legend text and fieldset border.

$form-spacing Number rem-calc(16)

Global spacing for form elements.

$helptext-color Color $black

Default color for help text.

$helptext-font-size Number rem-calc(13)

Default font size for help text.

$helptext-font-style Keyword italic

Default font style for help text.

$input-prefix-color Color $black

Color of labels prefixed to an input.

$input-prefix-background Color $light-gray

Background color of labels prefixed to an input.

$input-prefix-border Border 1px solid $medium-gray

Border around labels prefixed to an input.

$input-prefix-padding 1rem

Left/right padding of an pre/postfixed input label

$form-label-color Color $black

Color for form labels.

$form-label-font-size Number rem-calc(14)

Font size for form labels.

$form-label-font-weight Keyword $global-weight-normal

Font weight for form labels.

$form-label-line-height Number 1.8

Line height for form labels. The higher the number, the more space between the label and its input field.

$select-background Color $white

Background color for select menus.

$select-triangle-color Color $dark-gray

Color of the dropdown triangle inside select menus. Set to transparent to remove it entirely.

$select-radius Color $global-radius

Default radius for select menus.

$input-color Color $black

Font color of text inputs.

$input-placeholder-color Color $medium-gray

Font color of placeholder text within text inputs.

$input-font-family Font inherit

Font family of text inputs.

$input-font-size Number rem-calc(16)

Font size of text inputs.

$input-font-weight Keyword $global-weight-normal

Font weight of text inputs.

$input-line-height Keyword $global-lineheight

Line height of text inputs.

$input-background Color $white

Background color of text inputs.

$input-background-focus Color $white

Background color of focused of text inputs.

$input-background-disabled Color $light-gray

Background color of disabled text inputs.

$input-border Border 1px solid $medium-gray

Border around text inputs.

$input-border-focus Color 1px solid $dark-gray

Border around focused text inputs.

$input-padding Color $form-spacing * 0.5

Padding of text inputs.

$input-shadow Shadow inset 0 1px 2px rgba($black, 0.1)

Box shadow inside text inputs when not focused.

$input-shadow-focus Shadow 0 0 5px $medium-gray

Box shadow outside text inputs when focused.

$input-cursor-disabled Cursor not-allowed

Cursor to use when hovering over a disabled text input.

$input-transition Transition box-shadow 0.5s, border-color 0.25s ease-in-out

Properties to transition on text inputs.

$input-number-spinners Boolean true

Enables the up/down buttons that Chrome and Firefox add to <input type='number'> elements.

$input-radius Border $global-radius

Radius for text inputs.

$form-button-radius Number $global-radius

Border radius for form buttons, defaulted to global-radius.

$meter-height Length 1rem

Height of a <meter> element.

$meter-radius Length $global-radius

Border radius of a <meter> element.

$meter-background Color $medium-gray

Background color of a <meter> element.

$meter-fill-good Color $success-color

Meter fill for an optimal value in a <meter> element.

$meter-fill-medium Color $warning-color

Meter fill for an average value in a <meter> element.

$meter-fill-bad Color $alert-color

Meter fill for a suboptimal value in a <meter> element.

$progress-height Number 1rem

Height of a progress bar.

$progress-background Color $medium-gray

Background color of a progress bar.

$progress-margin-bottom Number $global-margin

Bottom margin of a progress bar.

$progress-meter-background Color $primary-color

Default color of a progress bar's meter.

$progress-radius Number $global-radius

Default radius of a progress bar.

$slider-height Number 0.5rem

Default height of the slider.

$slider-background Color $light-gray

Default background color of the slider's track.

$slider-fill-background Color $medium-gray

Default color of the active fill color of the slider.

$slider-handle-height Number 1.4rem

Default height of the handle of the slider.

$slider-handle-width Number 1.4rem

Default width of the handle of the slider.

$slider-handle-background Color $primary-color

Default color of the handle for the slider.

$slider-opacity-disabled Number 0.25

Default fade amount of a disabled slider.

$slider-radius Number $global-radius

Default radius for slider.