Playground — Forms

Forms

Underline and box styles, validation, field layouts.

Underline inputs

dd-input · dd-select · dd-textarea
Full underline form
We will never share this.
<div class="dd-form">
  <div class="dd-field-row">
    <div class="dd-field">
      <label class="dd-label">First name</label>
      <input class="dd-input" type="text">
    </div>
    <div class="dd-field">
      <label class="dd-label">Last name</label>
      <input class="dd-input" type="text">
    </div>
  </div>
  <div class="dd-field">
    <label class="dd-label">Email</label>
    <input class="dd-input" type="email">
    <span class="dd-help">Helper text</span>
  </div>
  <div class="dd-field">
    <label class="dd-label">Role</label>
    <select class="dd-select">…</select>
  </div>
  <div class="dd-field">
    <label class="dd-label">Message</label>
    <textarea class="dd-textarea"></textarea>
  </div>
  <label class="dd-control"><input type="checkbox"> Agree</label>
  <button class="dd-button">Submit</button>
</div>
Underline forms

Box inputs

dd-input-box · dd-select-box · dd-textarea-box
Box style with validation states
This field has an error.
<input class="dd-input-box" type="text">
<select class="dd-select-box">…</select>
<textarea class="dd-textarea-box"></textarea>

<!-- Validation states -->
<input class="dd-input-box is-valid">
<input class="dd-input-box is-invalid">
<span class="dd-field-error" role="alert">Error message</span>
Box inputs

Live validation

data-dd-validate
Submit to trigger validation 
<form class="dd-form" data-dd-validate>
  <div class="dd-field">
    <label class="dd-label">Email</label>
    <input class="dd-input-box" type="email"
           required
           data-dd-message="Enter a valid email.">
  </div>
  <button type="submit" class="dd-button">Submit</button>
</form>
Validation