Forms

To use this module, follow the instructions in the README. (For background on PXd, read the Getting Started documentation.)

px-forms-design

How to Use

Install via command line:

bower install --save https://github.build.ge.com/PXd/px-forms-design.git

Add to component Sass file:

@import "px-forms-design/_base.forms.scss";
Default, Readonly, Disabled

(The default behavior of input fields is to stretch to 100% of their container.)

<label for=…>…</label>
<input id=… class=text-input type=text placeholder="…">
<label for=…>…</label>
<input id=… class=text-input type=text value="…" readonly>
<label for=…>…</label>
<input id=… class=text-input type=text placeholder="…" disabled>
Basic form
<form>
  <fieldset>
    <legend>…</legend>
    <ol class=list-bare>
      <li class=form-field>
        <label for=…>…</label>
      <input id=… class=text-input type=text placeholder="…">
      <small class=form-field__help>…</small>
      </li>
      <li class=form-field>
        <input id=… type=checkbox>
        <label class=label--inline for=…>…</label>
      </li>
    </ol>
  </fieldset>
  <input class="btn btn--primary" type=submit value=…>
  <input class=btn type=reset value=…>
</form>
  1. Lorem Ipsum Dolor Sit
Checkbox
<input id=… type=checkbox disabled>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ type=checkbox>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ type=checkbox checked>
<label class=label--inline for=…>…</label>
Radio Button
<input id=… name=… type=radio disabled>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ name=… type=radio>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ name=… type=radio checked>
<label class=label--inline for=…>…</label>
One Line Form

Sass Flag

$inuit-enable-inline-fields : true;
Flag must be set before @import in component Sass file.

HTML

<… class="form-field form-field--inline">
  <label class=label--inline for=…>…</label>
  <input id=… class="text-input input--…" type=text>
  <label class=label--inline for=…>…</label>
  <input id=… class="text-input input--…" type=text>
  <input id=… type=checkbox>
  <label class=label--inline for=…>…</label>
  <input class="btn btn--primary" type=submit value=…>
</…>
Different input field widths

  1. Sass Flag

    $inuit-enable-input--tiny : true;
    Flag must be set before @import in component Sass file.

    HTML

    <input class="text-input input--tiny" type=text>

  2. Sass Flag

    $inuit-enable-input--small : true;
    Flag must be set before @import in component Sass file.

    HTML

    <input class="text-input input--small" type=text>

  3. Sass Flag

    $inuit-enable-input--regular : true;
    Flag must be set before @import in component Sass file.

    HTML

    <input class="text-input input--regular" type=text>

  4. Sass Flag

    $inuit-enable-input--large : true;
    Flag must be set before @import in component Sass file.

    HTML

    <input class="text-input input--large" type=text>

  5. Sass Flag

    $inuit-enable-input--huge : true;
    Flag must be set before @import in component Sass file.

    HTML

    <input class="text-input input--huge" type=text>
Different input types
<input class=text-input type=email>
<input class=text-input type=tel>
<input class=text-input type=search>
<input class=text-input type=number>
<input class=text-input type=password>
Text Area
<textarea placeholder="…"></textarea>
Validation States

Sass Flag

$inuit-enable-validation-states : true;
Flag must be set before @import in component Sass file.

HTML

<ol class=list-bare>
 <li class=form-field>
  <label for=… class=validation-warning>…</label>
  <input id=… class="text-input validation-warning" type=text>
  <small class="form-field__help validation-warning">…</small>
 </li>
 <li class=form-field>
  <label for=… class=validation-error>…</label>
  <input id=… class="text-input validation-error" type=text>
  <small class="form-field__help validation-error">…</small>
 </li>
 <li class=form-field>
  <label for=… class=validation-success>…</label>
  <input id=… class="text-input validation-success" type=text>
  <small class="form-field__help validation-success">…</small>
 </li>
</ol>
  1. Help Text
  2. Help Text
  3. Help Text
Dropdown
<select>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
</select>
<select disabled>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
</select>
<select>
  <optgroup label="…">
    <option>…</option>
    <option>…</option>
    <option>…</option>
    <option>…</option>
  </optgroup>
  <optgroup label="…">
    <option>…</option>
    <option>…</option>
    <option>…</option>
    <option>…</option>
  </optgroup>
</select>
Multiple Select
<select multiple>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
</select>