Form

<form>
  <div class="field">
    <label for="name-basic">Your name *</label>
    <input type="text" name="name" id="name-basic" placeholder="Name" />
  </div>
  <div class="field">
    <label for="email-basic">Your email *</label>
    <input type="email" name="email" id="email-basic" placeholder="Email" />
  </div>
  <div class="field">
    <label for="phone-basic">Your phone *</label>
    <input type="text" name="phone" id="phone-basic" placeholder="Phone" />
  </div>
  <div class="field">
    <label for="password-basic">Password</label>
    <input type="password" id="password-basic" placeholder="Password" />
  </div>
  <div class="field">
    <label for="gender-basic">Gender</label>
    <select id="gender-basic">
      <option>Select gender</option>
      <option>Male</option>
      <option>Female</option>
    </select>
  </div>
  <div class="field">
    <label for="file-basic">File input</label>
    <input type="file" id="file-basic" />
    <p class="hint">This is hint text here.</p>
  </div>
  <div class="field checkbox">
    <label>
      <input type="checkbox" />
      Check me out
    </label>
  </div>
  <div class="field">
    <label for="message-basic">Message *</label>
    <textarea
      name="message"
      id="message-basic"
      cols="30"
      rows="5"
      placeholder="Message..."
    ></textarea>
  </div>
</form>
<div class="field"><button type="submit">Send Message</button></div>

Inline form

<form class="inline">
  <div class="field">
    <label for="email-inline ">Your email</label>
    <input type="email" name="email" id="email-inline " placeholder="Email" />
  </div>
  <div class="field">
    <label for="password-inline ">Password</label>
    <input type="password" id="password-inline " placeholder="Password" />
  </div>
  <div class="field checkbox">
    <label>
      <input type="checkbox" />
      Remember me
    </label>
  </div>
  <div class="field"><button type="submit">Send Message</button></div>
</form>

<form class="inline unlabel">
  <div class="field">
    <label for="email-inline unlabel">Your email</label>
    <input
      type="email"
      name="email"
      id="email-inline unlabel"
      placeholder="Email"
    />
  </div>
  <div class="field">
    <label for="password-inline unlabel">Password</label>
    <input
      type="password"
      id="password-inline unlabel"
      placeholder="Password"
    />
  </div>
  <div class="field checkbox">
    <label>
      <input type="checkbox" />
      Remember me
    </label>
  </div>
  <div class="field"><button type="submit">Send Message</button></div>
</form>

<form class="inline">
  <input type="email" name="email" placeholder="Email" />
  <input type="password" placeholder="Password" />
  <label>
    <input type="checkbox" />
    Remember me
  </label>
  <button type="submit">Send Message</button>
</form>

Justified inline

<div class="justified">
  <div class="field"><input type="text" /></div>
  <div class="field"><input type="text" /></div>
  <div class="field"><input type="text" /></div>
</div>

Horizontal form

<form class="horizontal offset two">
  <div class="field">
    <label for="name-horizontal-offset-two">Your name *</label>
    <input
      type="text"
      name="name"
      id="name-horizontal-offset-two"
      placeholder="Name"
    />
  </div>
  <div class="field">
    <label for="email-horizontal-offset-two">Your email *</label>
    <input
      type="email"
      name="email"
      id="email-horizontal-offset-two"
      placeholder="Email"
    />
  </div>
  <div class="field">
    <label for="phone-horizontal-offset-two">Your phone *</label>
    <input
      type="text"
      name="phone"
      id="phone-horizontal-offset-two"
      placeholder="Phone"
    />
  </div>
  <div class="field">
    <label for="password-horizontal-offset-two">Password</label>
    <input
      type="password"
      id="password-horizontal-offset-two"
      placeholder="Password"
    />
  </div>
  <div class="field">
    <label for="gender-horizontal-offset-two">Gender</label>
    <select id="gender-horizontal-offset-two">
      <option>Select gender</option>
      <option>Male</option>
      <option>Female</option>
    </select>
  </div>
  <div class="field">
    <label for="file-horizontal-offset-two">File input</label>
    <input type="file" id="file-horizontal-offset-two" />
    <p class="hint">This is hint text here.</p>
  </div>
  <div class="field checkbox">
    <label>
      <input type="checkbox" />
      Check me out
    </label>
  </div>
  <div class="field">
    <label for="message-horizontal-offset-two">Message *</label>
    <textarea
      name="message"
      id="message-horizontal-offset-two"
      cols="30"
      rows="5"
      placeholder="Message..."
    ></textarea>
  </div>
</form>
<div class="field"><button type="submit">Send Message</button></div>

Static text

When you need to place plain text next to a form label within a horizontal form, use the .static class on a <p>.

<form class="horizontal offset two">
  <div class="field">
    <label for="email">Email</label>
    <p class="static">email@example.com</p>
  </div>
  <div class="field">
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Password" />
  </div>
</form>

Disabled fieldsets

<form class="horizontal offset two">
  <fieldset disabled>
    <div class="field">
      <label for="email-disabled-fieldsets">Email</label>
      <input
        type="email"
        name="email"
        id="email-disabled-fieldsets"
        placeholder="Email"
      />
    </div>
    <div class="field">
      <label for="password">Password</label>
      <input type="password" id="password" placeholder="Password" />
    </div>
    <div class="field">
      <label for="gender-disabled-fieldsets">Gender</label>
      <select id="gender-disabled-fieldsets">
        <option>Select gender</option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>
    <div class="field">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </fieldset>
</form>

Validation states

<form>
  <div class="field success">
    <label for="text-success">Input with success</label>
    <input type="text" name="success" id="text-success" />
  </div>
  <div class="field warning">
    <label for="text-warning">Input with warning</label>
    <input type="text" name="warning" id="text-warning" />
  </div>
  <div class="field error">
    <label for="text-error">Input with error</label>
    <input type="text" name="error" id="text-error" />
  </div>
</form>

With optional icons

<form>
  <div class="field success feedback">
    <label for="text-success">Input with success</label>
    <input type="text" name="success" id="text-success" />
  </div>
  <div class="field warning feedback">
    <label for="text-warning">Input with warning</label>
    <input type="text" name="warning" id="text-warning" />
  </div>
  <div class="field error feedback">
    <label for="text-error">Input with error</label>
    <input type="text" name="error" id="text-error" />
  </div>
</form>

<form class="horizontal offset three">
  <div class="field success feedback">
    <label for="text-success">Input with success</label>
    <input type="text" name="success" id="text-success" />
  </div>
  <div class="field warning feedback">
    <label for="text-warning">Input with warning</label>
    <input type="text" name="warning" id="text-warning" />
  </div>
  <div class="field error feedback">
    <label for="text-error">Input with error</label>
    <input type="text" name="error" id="text-error" />
  </div>
</form>

<form class="inline">
  <div class="field success feedback">
    <label for="text-success">Input with success</label>
    <input type="text" name="success" id="text-success" />
  </div>
</form>