Foundation input box size

Use grid columns to set the size of the input box, such as.large-6, .medium-6, etc.

For more knowledge about grid systems, you can clickGrid SystemTutorial.

Example

<form>
<div class="row">
    <div class="large-10 medium-7 columns">
      <label>large-10 medium-7 (100% on small)
      <input type="text" placeholder="Name">
      </label>
    </div>
</div>

<div class="row">
    <div class="small-5 columns">
      <label>small-5
        <input type="text" placeholder="Name">
      </label>
    </div>
</div>

<div class="row">
    <div class="medium-3 columns">
      <label>medium-3 (100% on small)
        <input type="text" placeholder="Name">
      </label>
    </div>
</div>
</form>

Try it Yourself »

Equal Size Columns

The following demonstrates an example of equal-sized columns:

Example

<form>
<div class="row">
    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>

    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>

    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>
</div>
</form>

Try it Yourself »

Inline Labels

If you want your label content to display on the left (not on top), you can place the label element on a different column to the left of the input box, and use.inlineUse the class to set vertical centering:

Example

Try it Yourself »

Prefix and suffix labels

You can<div class="row collapse">Add prepended and appended labels, with the elements being:<element class="postfix">or<element class="prefix">You can use the grid system to set the size of the prepended and appended labels:

Example

Try it Yourself »

Prepend and append label buttons

You can use<a>Adding Elements.buttonClasses to set the prepend and append buttons:

Example

Try it Yourself »

Prepend and append rounded label buttons

Example

<form>
<div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">Prefix</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <span class="postfix">Postfix</span>
        </div>
      </div>
    </div>
</div>
<div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-round">
        <div class="small-3 columns">
          <a href="#" class="button prefix">Go</a>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-round">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <a href="#" class="button postfix">Go</a>
        </div>
      </div>
    </div>
</div>
</form>

Try it Yourself »

other extensions