Form Styles

Each row is wrapped within a form-row class. A form is designed such that by default it will expand to fill the parent div unless a width is given to the form (Hint: Grids!).

Vertical Layout

The Aegis forms are generally laid out in a vertical fashion, with labels above their fields, and the form is scanned in a top-down manner.

Full Form Functionality

Username

">

<form>
<div class="form-row">
  <label for="username">Username</label>
  <div class="field-wrapper">
    <input id='username' type="text">
    <aside class="field-help">
      <p>Let's see how field-help works.</p>
    </aside>
  </div>
</div>
<div class="form-row">
  <label for="password">Password</label>
  <div class="field-wrapper">
    <input id='password' type="password">
    <aside class="field-help">
      <p>Please enter your password.</p>
    </aside>
  </div>
</div>
<div class="form-row">
  <div class="field-wrapper">
    <input type="checkbox">Remember Me</input>
    <aside class="field-help">
      <p>So you see how field-help works?</p>
    </aside>
  </div>
</div>
<div class="form-row">
  <div class="form-actions">
    <button class="button primary">Log In</button>
  </div>
</div>
</form>

Horizontal Layout

To make the label and fields align horizontally, just add a .form-horizontal class to the form.

Full Form Functionality

Username

Password

<form class=&#039;form-horizontal&#039;>
  <fieldset>
    <legend>Full Form Functionality</legend>
    <div class="form-row">
      <label for="username">Username</label>
      <div class="field-wrapper">
        <input id=&#039;username&#039; type="text">
        <aside class="field-help">
          <p>Let&#039;s see how field-help works.</p>
        </aside>
      </div>
    </div>
    <div class="form-row">
      <label for="password">Password</label>
      <div class="field-wrapper">
        <input id=&#039;password&#039; type="password">
        <aside class="field-help">
          <p>Please enter your password.</p>
        </aside>
      </div>
    </div>
    <div class="form-row">
      <div class="field-wrapper">
        <input type="checkbox">Remember Me</input>
        <aside class="field-help">
          <p>So you see how field-help works?</p>
        </aside>
      </div>
    </div>
    <div class="form-row">
      <div class="form-actions">
        <button class="button primary">Log In</button>
      </div>
    </div>
  </fieldset>
</form>

Standard Elements

Text Inputs

Text inputs are omnipresent, from the username and password fields strewn all around, to nearly all related fields like search, email, url, tel, date, time, month, week, datetime, datetime-local, and number.

<input type='text'>

Textarea

Textarea inputs follow the same styles of normal text inputs. They can be resized vertically.

<input type='text'>

Checkboxes & Radios

Checkboxes are used for selecting multiple items from a given set, whereas Radio buttons allow only one item to be selected. Checkboxes are rendered in a stacked formation, whereas radio-buttons of a group are rendered side-by-side as long as there is horizontal space available.

<label for='wolverine'>
  <input type="checkbox" id="wolverine" value="wolverine" name="xmen" checked> Wolverine </input>
</label>

<label for="cyclops">
  <input type="checkbox" id="cyclops" value="cyclops" name="xmen"> Cyclops </input>
</label>

<label for="apocalypse" class='disabled'>
  <input type="checkbox" id="apocalypse" value="apocalypse" name="xmen" disabled> Apocalypse </input>
</label>

<label for="expanding">
  <input type="radio" id="expanding" name="universe" value="expanding" checked> Expanding </input>
</label>

<label for="contracting">
  <input type="radio" id="contracting" name="universe" value="contracting"> Contracting </input>
</label>

Select Boxes

Select boxes allow you to select an option from a given list.

<select id="select">
  <option value="???">Joker</option>
  <option value="edward">Riddler</option>
  <option value="victorF">Mr. Freeze</option>
  <option value="bane">Bane</option>
  <option value="victorZ">Zsasz</option>
</select>

New Elements

Aegis adds some additional form elements to this standard set. To use these elements, you'll have to include the corresponding plugin scripts in your page within a <script> tag. For example, if your want to add a multiselect input, you need to include aegis-multiselect.js to your page.

Snippets

Snippets are small bits of information which you'd like users to select, copy and paste somewhere. Some use cases are presenting IDs or application secrets for developers to copy/paste in their code. To turn any text into a snippet, surround it with a .snippet span. You can also add a .select-snippet button next to the .snippet span to give users a more clear way to select the text. Note that right now, clicking on the snippet class only selects the text, but does not copy it. Javascript is not allowed (yet) to directly access the clipboad, but hopefully this operation will be supported soon. Till then, Ctrl+C is your friend.

Remember to include the aegis-snippets.js file in your code to use this feature

col-9 alpha

This is some random text which can be copied in one clickSelect

<form>
  <div class="form-row">
    <div class="field-wrapper">
      <span class="snippet" title="Click on the text to copy it">
        This is some random text which can be copied in one click
      </span>
      <a class="button inline select-snippet">Select</a>
    </div>
  </div>
</form>

Addons

In addition to all the form-elements listed above, here are some nifty addons to make your forms more user-friendly.

Field Help

As shown above, field helps are used to provide guidance to the user while filling the form in the form of tooltips. You can use tooltips by adding another element beside the input field with a .field-help class.

<select id="select">
  <option value="hush">Hush</option>
  <option value="ras-al-ghul">Raʾs al-Ġūl</option>
  <option value="scarecrow">Scarecrow</option>
</select>
<aside class="field-help">Choose your most-feared nightmare</aside>

Form Help

Also provided is a general help text for the whole form. Use it by adding the .form-help class to a span or div.

<div class="form-row">
  <div class="form-help">We know your identity Bruce!</div>
</div>