Inputs

<h2 class="sg-subtitle">Text</h2>

<div class="iop-form-element">
    <label for="edit-surname1">Surname</label>
    <input class="iop-input" type="text" id="edit-surname1" value="Horse with no name" size="60" maxlength="128">
    <span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element iop-form-element--message">
    <label for="edit-surname1-message">Surname</label>
    <input class="iop-input" type="text" id="edit-surname1-message" value="Horse with no name" size="60" maxlength="128">
    <span class="iop-form-element__message">A horse with no name ? But a man need a name !</span>
    <span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element iop-form-element--icon">
    <span class="iop-icon iop-icon--profile"></span>
    <label for="edit-surname2">Surname Icon</label>
    <input class="iop-input" type="text" id="edit-surname2" value="" size="60" maxlength="128">
    <span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element iop-form-element--error">
    <label for="edit-surname3">Surname Error</label>
    <input class="iop-input" type="text" id="edit-surname3" value="Something" size="60" maxlength="128">
    <span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element iop-form-element--error iop-form-element--message">
    <label for="edit-surname4">Surname Error</label>
    <input class="iop-input" type="text" id="edit-surname4" value="Something" size="60" maxlength="128" />
    <span class="iop-form-element__message">Some error message here </span>
    <span class="iop-form-element__focus"></span>
</div>

<h2 class="sg-subtitle">Password</h2>
<div class="iop-form-element">
    <label for="password">Password</label>
    <input class="iop-input" id="password" type="password" value="superpassword" />
    <span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element iop-form-element--error">
    <label for="password2">Password error</label>
    <input class="iop-input" id="password2" type="password" value="superpassword" />
    <span class="iop-form-element__focus"></span>
</div>

<h2 class="sg-subtitle">Email</h2>
<div class="iop-form-element">
    <label for="email">Email Address</label>
    <input class="iop-input" id="email" type="email" value="robin.Instrumentation@iop.org" />
    <span class="iop-form-element__focus"></span>
</div>
<div class="iop-form-element iop-form-element--error">
    <label for="email2">Email Address</label>
    <input class="iop-input" id="email2" type="email" value="robin.Instrumentation@iop.org" />
    <span class="iop-form-element__focus"></span>
</div>

<h2 class="sg-subtitle">Select</h2>
<form action="" class="flex-form">
    <div class="iop-form-element fi-5">
        <label for="select-item">Dropdown</label>
        <select class="iop-select" id="select-item">
      <option value="a">A item</option>
      <option value="b">B item</option>
      <option value="c">C item</option>
    </select>
        <span class="iop-input__select-icon iop-icon iop-icon--chevron-up"></span>
        <span class="iop-form-element__focus"></span>
    </div>
</form>

<h2 class="sg-subtitle">Checkboxes</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;Checkbox&gt;</code>
        <div class="iop-form-element iop-form-element--checkbox">
            <input class="iop-input" type="checkbox" id="edit-groups-g73">
            <label for="edit-groups-g73">Biological Physics Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis dolor fuga quisquam ad quaerat et aliquid, beatae fugiat, saepe magni libero natus illo expedita quibusdam! Dolorem reprehenderit rem cupiditate hic.</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;Checkbox&gt;</code>
        <div class="iop-form-element iop-form-element--checkbox">
            <input class="iop-input" type="checkbox" id="edit-groups-g74" checked>
            <label for="edit-groups-g74">Biological Physics</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;Checkbox&gt;</code>
        <div class="iop-form-element iop-form-element--checkbox">
            <input class="iop-input" type="checkbox" id="edit-groups-g75">
            <label for="edit-groups-g75">Biological Physics</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
</div>

<h2 class="sg-subtitle">Radio</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;Radio&gt;</code>
        <div class="iop-form-element iop-form-element--radio">
            <input class="iop-input" name="drone" type="radio" id="radio-1">
            <label for="radio-1">Wheel</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;Radio&gt;</code>
        <div class="iop-form-element iop-form-element--radio">
            <input class="iop-input" name="drone" type="radio" id="radio-2" checked>
            <label for="radio-2">Wings</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;Radio&gt;</code>
        <div class="iop-form-element iop-form-element--radio">
            <input class="iop-input" name="drone" type="radio" id="radio-3">
            <label for="radio-3">Legs Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut ea voluptatum in, tenetur optio aliquid placeat at, accusantium expedita adipisci aperiam necessitatibus, quaerat unde impedit facere ipsum recusandae harum? Incidunt?</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
</div>

<h2 class="sg-subtitle">Image checkboxes</h2>
<div class="row">
    <div class="col-sm-4">
        <code class="sg-label">&lt;Image checkbox&gt;</code>
        <div class="iop-form-element iop-form-element--checkbox-img iop-button iop-button--image">
            <span class="iop-button__image">
        <img src="https://images.unsplash.com/photo-1532669586455-4ae96e2849d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=100&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=044c480e6b5595fdd2763169d9169b3d" alt="Image button 1">
      </span>
            <input class="iop-input" type="checkbox" id="edit-groups-g76">
            <label for="edit-groups-g76">Biological Physics</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;Image checkbox&gt;</code>
        <div class="iop-form-element iop-form-element--checkbox-img iop-button iop-button--image">
            <span class="iop-button__image">
        <img src="https://images.unsplash.com/photo-1532669586455-4ae96e2849d6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=100&h=100&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=044c480e6b5595fdd2763169d9169b3d" alt="Image button 1">
      </span>
            <input class="iop-input" type="checkbox" id="edit-groups-g77" checked>
            <label for="edit-groups-g77">Biological Physics</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
    <div class="col-sm-4">
        <code class="sg-label">&lt;Image checkbox&gt;</code>
        <div class="iop-form-element iop-form-element--checkbox-img iop-button iop-button--image">
            <span class="iop-button__image"></span>
            <input class="iop-input" type="checkbox" id="edit-groups-g78">
            <label for="edit-groups-g78">Biological Physics</label>
            <span class="iop-form-element__focus"></span>
        </div>
    </div>
</div>