Forms

Add .input to inputs, textarea or select. Use .checkbox and .radio for checkbox and radio elements respectively. Arrange content using grid classes.



<form method="post">
  <div class="row">
    <div class="phablet-6 columns">
      <label for="input-11">First name</label>
      <input type="text" class="input" placeholder="First name" id="input-11">
    </div>
    <div class="phablet-6 columns">
      <label for="input-12">Last name</label>
      <input type="text" class="input" placeholder="Last name" id="input-12">
    </div>
  </div>

  <label for="input-13">Email</label>
  <input type="email" class="input" placeholder="Email" id="input-13" required>
  <label for="input-14">Password</label>
  <input type="password" class="input" placeholder="Password" id="input-14">

  <label>Birthday</label>
  <div class="row">
    <div class="tablet-2 phablet-4 mobile-6 columns"><select class="input"><option>Day</option></select></div>
    <div class="tablet-2 phablet-4 mobile-6 columns"><select class="input"><option>Month</option></select></div>
    <div class="tablet-2 phablet-4 mobile-6 columns"><select class="input"><option>Year</option></select></div>
  </div>

  <label class="radio"><input type="radio" name="gender"> Female</label>
  <label class="radio"><input type="radio" name="gender"> Male</label> <br>
  <label class="checkbox"><input type="checkbox"> I agree to the terms and conditions</label> <br>

  <button type="submit" class="primary button">Sign up</button>
</form>

Hidden labels

Use .sr-only class to hide labels.



<form method="post">
  <div class="row">
    <div class="phablet-6 columns">
      <label for="input-11" class="sr-only">First name</label>
      <input type="text" class="input" placeholder="First name" id="input-11">
    </div>
    <div class="phablet-6 columns">
      <label for="input-12" class="sr-only">Last name</label>
      <input type="text" class="input" placeholder="Last name" id="input-12">
    </div>
  </div>

  <label for="input-13" class="sr-only">Email</label>
  <input type="email" class="input" placeholder="Email" id="input-13" required>
  <label for="input-14" class="sr-only">Password</label>
  <input type="password" class="input" placeholder="Password" id="input-14">

  <label>Birthday</label>
  <div class="row">
    <div class="tablet-2 phablet-4 mobile-6 columns"><select class="input"><option>Day</option></select></div>
    <div class="tablet-2 phablet-4 mobile-6 columns"><select class="input"><option>Month</option></select></div>
    <div class="tablet-2 phablet-4 mobile-6 columns"><select class="input"><option>Year</option></select></div>
  </div>

  <label class="radio"><input type="radio" name="gender"> Female</label>
  <label class="radio"><input type="radio" name="gender"> Male</label> <br>
  <label class="checkbox"><input type="checkbox"> I agree to the terms and conditions</label> <br>

  <button type="submit" class="primary button">Sign up</button>
</form>

Horizontal

Use grid classes to arrange content.

<form>
  <div class="row">
    <div class="column tablet-2"><label for="input-21">Email</label></div>
    <div class="column tablet-10"><input type="email" class="input" placeholder="Email" id="input-21"></div>
    <div class="column tablet-2"><label for="input-22">Password</label></div>
    <div class="column tablet-10"><input type="password" class="input" placeholder="Password" id="input-22"></div>
    <div class="column tablet-10 offset-tablet-2"><label class="checkbox"><input type="checkbox"> Remember me</label></div>
    <div class="column tablet-10 offset-tablet-2"><input class="primary button" type="submit" value="Sign in"></div>
  </div>
</form>

Sizes

Change size using .size-small, .size-large helper classes.

<input type="text" class="input size-large" placeholder="large input">
<textarea class="input size-large" placeholder="large textarea"></textarea>
<select class="input size-large"><option>large select</option></select>
<input type="text" class="input size-small" placeholder="small input">
<textarea class="input size-small" placeholder="small textarea"></textarea>
<select class="input size-small"><option>small select</option></select>

Required

Add required attribute for compulsory fields. Styling of required fields is done only when colors.error variable is set in variables.styl file.

<input required type="text" class="input" placeholder="required input">
<textarea required class="input" placeholder="required textarea"></textarea>
<select required class="input"><option value="">required select</option></select>

Disabled

Add disabled attribute to disable fields. Multiple fields can be disabled by wrapping them in a fieldset and adding disabled attribute to it.

<input disabled type="text" class="input" placeholder="disabled input">
<textarea disabled class="input" placeholder="disabled textarea"></textarea>
<select disabled class="input"><option value="">disabled select</option></select>

Readonly

Add readonly attribute to make inputs non-editable but readable.

<input readonly type="text" class="input" placeholder="readonly input">
<textarea readonly class="input" placeholder="readonly textarea"></textarea>

Fieldset

fieldset styles are reset to make it look like a normal div. Multiple fields can be disabled by wrapping them in a fieldset and adding disabled attribute to it.

<fieldset>
  <input type="text" class="input" placeholder="input">
  <textarea class="input" placeholder="textarea"></textarea>
  <select class="input"><option>select</option></select>
</fieldset>
<fieldset disabled>
  <input type="text" class="input" placeholder="disabled input">
  <textarea class="input" placeholder="disabled textarea"></textarea>
  <select class="input"><option>disabled select</option></select>
</fieldset>