Foundation
Jump to Nav

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

#### Text Inputs

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

    <form>
      <div class="row">
        <div class="medium-6 columns">
          <label>Input Label
            <input type="text" placeholder=".medium-6.columns">
          </label>
        </div>
        <div class="medium-6 columns">
          <label>Input Label
            <input type="text" placeholder=".medium-6.columns">
          </label>
        </div>
      </div>
    </form>

Input Label
Input Label

#### 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`.

    <label>
      How many puppies?
      <input type="number" value="100">
    </label>

How many puppies?

#### Text Areas

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

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

What books did you read over summer break?

#### Select Menus

Use select menus to combine many choices into one menu.

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

Select Menu

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>

Multiple Select Menu

#### 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>`.

    <div class="row">
      <fieldset class="large-6 columns">
        <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-6 columns">
        <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 Red Blue Yellow
Check these out Checkbox 1 Checkbox 2 Checkbox 3

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

    <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 Checkbox 1 Checkbox 2 Checkbox 3

## Help Text

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.

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

Password

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

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

    <form>
      <div class="row">
        <div class="small-3 columns">
          <label for="right-label" class="text-right">Label</label>
        </div>
        <div class="small-9 columns">
          <input type="text" id="right-label" placeholder="Right-aligned text input">
        </div>
      </div>
    </form>

Label

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

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

Label

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

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

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

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

Upload File

## Custom Controls

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.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$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-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-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.