Unigrid

CSS Framework

Forms

Form elements styled to the vertical rhythm, including inputs, selects, textareas, checkboxes, radios, sizing, inline layout, and validation states.

Text Input

Text input with label

We will never share your email. 
<div class="ug-form__group">
  <label class="ug-form__label">Full Name</label>
  <input class="ug-form__input" type="text" placeholder="Enter your name" />
</div>
<div class="ug-form__group">
  <label class="ug-form__label">Email Address</label>
  <input class="ug-form__input" type="email" placeholder="you@example.com" />
  <span class="ug-form__help">We will never share your email.</span>
</div>

Select

Select dropdown

<div class="ug-form__group">
  <label class="ug-form__label">Favorite Park</label>
  <select class="ug-form__select">
    <option value="">Choose a park...</option>
    <option value="yellowstone">Yellowstone</option>
    <option value="yosemite">Yosemite</option>
    <option value="grand-canyon">Grand Canyon</option>
    <option value="zion">Zion</option>
  </select>
</div>

Textarea

Textarea

<div class="ug-form__group">
  <label class="ug-form__label">Your Message</label>
  <textarea class="ug-form__textarea" rows="4" placeholder="Write your message here..."></textarea>
</div>

Checkboxes

Checkbox inputs

<div class="ug-form__group">
  <label class="ug-form__label">Interests</label>
  <label class="ug-form__checkbox">
    <input type="checkbox" checked />
    <span>Hiking</span>
  </label>
  <label class="ug-form__checkbox">
    <input type="checkbox" />
    <span>Camping</span>
  </label>
  <label class="ug-form__checkbox">
    <input type="checkbox" />
    <span>Wildlife Photography</span>
  </label>
</div>

Radio Buttons

Radio inputs

<div class="ug-form__group">
  <label class="ug-form__label">Skill Level</label>
  <label class="ug-form__radio">
    <input type="radio" name="skill" checked />
    <span>Beginner</span>
  </label>
  <label class="ug-form__radio">
    <input type="radio" name="skill" />
    <span>Intermediate</span>
  </label>
  <label class="ug-form__radio">
    <input type="radio" name="skill" />
    <span>Advanced</span>
  </label>
</div>

Input Sizes

Small and large inputs

<div class="ug-form__group">
  <label class="ug-form__label">Small Input</label>
  <input class="ug-form__input ug-form__input--sm" type="text" placeholder="Small" />
</div>
<div class="ug-form__group">
  <label class="ug-form__label">Default Input</label>
  <input class="ug-form__input" type="text" placeholder="Default" />
</div>
<div class="ug-form__group">
  <label class="ug-form__label">Large Input</label>
  <input class="ug-form__input ug-form__input--lg" type="text" placeholder="Large" />
</div>

Inline Form

Inline layout

Submit 
<form class="ug-form--inline">
  <div class="ug-form__group">
    <label class="ug-form__label">Name</label>
    <input class="ug-form__input" type="text" placeholder="Name" />
  </div>
  <div class="ug-form__group">
    <label class="ug-form__label">Email</label>
    <input class="ug-form__input" type="email" placeholder="Email" />
  </div>
  <a class="ug-btn" href="#">Submit</a>
</form>

Error State

Validation error

Please enter a valid email address. 
<div class="ug-form__group">
  <label class="ug-form__label">Email Address</label>
  <input class="ug-form__input" type="email" value="not-an-email" required />
  <span class="ug-form__error">Please enter a valid email address.</span>
</div>

Disabled State

Disabled inputs

<div class="ug-form__group">
  <label class="ug-form__label">Disabled Input</label>
  <input class="ug-form__input" type="text" value="Cannot edit this" disabled />
</div>
<div class="ug-form__group">
  <label class="ug-form__label">Disabled Select</label>
  <select class="ug-form__select" disabled>
    <option>Cannot change this</option>
  </select>
</div>
<div class="ug-form__group">
  <label class="ug-form__label">Disabled Textarea</label>
  <textarea class="ug-form__textarea" disabled>Cannot edit this</textarea>
</div>

Class Reference

Class Description
.ug-form__group Form field group wrapper
.ug-form__label Field label
.ug-form__input Text input field
.ug-form__input--sm Small input size
.ug-form__input--lg Large input size
.ug-form__select Select dropdown
.ug-form__textarea Textarea field
.ug-form__checkbox Checkbox wrapper (label + input + span)
.ug-form__radio Radio button wrapper (label + input + span)
.ug-form__help Help text below a field
.ug-form__error Error message text
.ug-form--inline Inline form layout
.ug-form--disabled Disabled form state (also :disabled)