Input

All input elements come with a base styling and simplified markup.

Basic input

<div class="input">
  <label for="text">Text</label>
  <input type="text" id="text" placeholder="Text">
  <span class="message">This is a helpful message.</span>
  <span class="message message--error">Input is required.</span>
</div>

Select input

<div class="select">
  <label for="select">Select</label>
  <select type="select" id="select">
    <option disabled>Lorem Ipsum</option>
    <option>Varius urna</option>
    <option>Facilisi natoque</option>
  </select>
  <span class="message">This is a helpful message.</span>
  <span class="message message--error">Input is required.</span>
</div>

Checkbox input

<div class="checkbox">
  <label for="checkbox">
    <input type="checkbox" id="checkbox" />
    Vivamus hendrerit tortor sagittis hac npraesent
  </label>
  <span class="message">This is a helpful message.</span>
  <span class="message message--error">Input is required.</span>
</div>

Radio input

<div class="radio">
  <label for="radio">
    <input type="radio" id="radio" name="radio" />
    Lorem Ipsum
  </label>
  <span class="message">This is a helpful message.</span>
  <span class="message message--error">Input is required.</span>
</div>

Playground