Foundation Forms

Foundation provides styled form elements that are accessible and customizable.

Basic Form

<form>
  <label>Name
    <input type="text" placeholder="Enter your name">
  </label>
  
  <label>Email
    <input type="email" placeholder="Enter your email">
  </label>
  
  <label>Message
    <textarea placeholder="Enter your message"></textarea>
  </label>
  
  <button type="submit" class="button primary">Submit</button>
</form>

Form Sizes

<input class="input-group-field tiny" type="text" placeholder="Tiny">
<input class="input-group-field small" type="text" placeholder="Small">
<input class="input-group-field" type="text" placeholder="Default">
<input class="input-group-field large" type="text" placeholder="Large">

Select Menus

<label>Choose an option
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</label>

<!-- Multiple select -->
<label>Multiple options
  <select multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</label>

Checkboxes and Radios

<!-- Checkboxes -->
<fieldset class="fieldset">
  <legend>Checkboxes</legend>
  <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
  <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</fieldset>

<!-- Radio Buttons -->
<fieldset class="fieldset">
  <legend>Radio Buttons</legend>
  <input type="radio" name="radioGroup" value="1" id="radio1"><label for="radio1">Radio 1</label>
  <input type="radio" name="radioGroup" value="2" id="radio2"><label for="radio2">Radio 2</label>
</fieldset>

Form Validation

<label>Required Field
  <input type="text" class="is-invalid-input" required>
  <span class="form-error">This field is required.</span>
</label>

<label>Valid Field
  <input type="text" class="is-valid-input">
  <span class="form-success">Looks good!</span>
</label>

Input Groups

<div class="input-group">
  <span class="input-group-label">@</span>
  <input class="input-group-field" type="text" placeholder="Username">
</div>

<div class="input-group">
  <input class="input-group-field" type="text" placeholder="Amount">
  <span class="input-group-label">.00</span>
</div>

<!-- Button in input group -->
<div class="input-group">
  <input class="input-group-field" type="text">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>

Up next: Foundation Navigation