Logo
Become a Client

Toggle Switches

Switch Default 
<div class="switch">
  <input class="switch-input" id="toggle1" type="checkbox">
  <label class="switch-paddle" for="toggle1">
    <span class="show-for-sr">Toggle Default</span>
  </label>
</div>
Switch with Label .switch + label 
<div class="switch">
  <input class="switch-input" id="toggle2" type="checkbox">
  <label class="switch-paddle" for="toggle2">
    <span class="show-for-sr">Enable notifications</span>
  </label>
</div>
<label for="toggle2" class="inline">Enable notifications</label>
Switch Disabled 
<div class="switch">
  <input class="switch-input" id="toggle3" type="checkbox" disabled>
  <label class="switch-paddle" for="toggle3">
    <span class="show-for-sr">Disabled toggle</span>
  </label>
</div>
<label for="toggle3" class="inline disabled">Disabled toggle</label>
Switch .is-error
Please enable to continue 
<div class="is-error">
  <div class="switch">
    <input class="switch-input" id="toggle4" type="checkbox">
    <label class="switch-paddle" for="toggle4">
      <span class="show-for-sr">Enable setting</span>
    </label>
  </div>
  <label for="toggle4" class="inline">Enable setting</label>
  <span class="form-error is-visible">Please enable to continue</span>
</div>

Form Field Options

Checkbox Default 
<label>
  <input type="checkbox">
  I agree to the terms and conditions.
</label>
Checkbox Disabled 
<label>
  <input type="checkbox" disabled>
  This option is disabled.
</label>
Checkbox .is-error Please accept to continue 
<div class="is-error">
  <label>
    <input type="checkbox">
    Accept newsletter terms
  </label>
  <span class="form-error is-visible">Please accept to continue</span>
</div>
Radio Field Group

Choose one of the options below.


<input type="radio" id="plan1" name="plan">
<label for="plan1">Basic Plan</label>
Radio Disabled 
<input type="radio" id="option1" name="disabled-group" disabled>
<label for="option1" class="disabled">Option Unavailable</label>

Input Fields

Floating Label Input 
<div class="floating-label-group">
  <input type="text" id="input1" required placeholder=" ">
  <label for="input1">Text Input Label</label>
</div>
Input with Icon Left .input-icon-left 
<div class="input-group input-icon-left floating-label-group">
  <span class="input-group-label"><i class="icon icom-user"></i></span>
  <input type="text" id="input2" required placeholder=" " class="input-group-field">
  <label for="input2">Username</label>
</div>
Success Input .is-success

Username available

<div class="floating-label-group">
  <input type="text" id="input4" class="is-success" value="IDCustomername" required placeholder=" ">
  <label for="input4">Create Username</label>
  <p class="help-text success">Username available</p>
</div>
Error Input .is-error

Username unavailable

<div class="floating-label-group">
  <input type="text" id="input5" class="is-error" value="IDCustomername" required placeholder=" ">
  <label for="input5">Create Username</label>
  <p class="form-error is-visible">Username unavailable</p>
</div>
Textarea 
<div class="floating-label-group">
  <textarea id="input6" rows="4" required placeholder=" "></textarea>
  <label for="input6">Text Area Label</label>
</div>

Dropdowns

Multiple 
<select class="foundation-select" data-label="Country" id="country-select" multiple>
  <option value="usa">USA</option>
  <option value="portugal">Portugal</option>
  <option value="uk">UK</option>
  <option value="germany">Germany</option>
</select>
Single 
<select class="foundation-select" data-label="Country" id="country-select">
  <option value="usa">USA</option>
  <option value="portugal">Portugal</option>
  <option value="uk">UK</option>
  <option value="germany">Germany</option>
</select>

Gravity Forms

[gravityform id="9" title="true" ajax="true"]

Marketo

<div class="marketo-form-container" data-form-id="2006" data-munchkin-id="081-ATC-910">
  <form id="mktoForm_2006"></form>
</div>