Form essentials

There are some essential classes you'll use to build forms with Ink: ink-form, block, inline, control and control-group.

To get started, add the ink-form and block or inline class to you form element.

To add labels and form fields use a div element with the control class to wrap each label/field pair.

Don't forget to put your fields in a fieldset element!

Check out the examples below.

<form class="ink-form block">
  <fieldset>
    <div class="control">
      <label for="inputId">Name</label>
      <input type="text" id="inputId">
    </div>
  <fieldset>
</form>

Text & Number entry

Fieldset legend

You can add help text to fields

Warn your user about some problem with the form.

This field is required.

Block form

In this example, the <label> for each field is located above the field, in block. To achieve this we used block in the <form> element.

Required fields and warnings

If you have a required field, use the field wrapping element (control or control-group ) to add a required class.

If you need to print a warning or error message near your field, then add the validation class to the wrapper (control or control-group) and an warning or error class.

Also add a message using a paragraph element with the tip class.

Example

Here's a simple form with a required field and a warning message:

<form class="ink-form block">
  <div class="control validation warning">
    <label for="inputId">Text input</label>
    <input type="text" id="inputId2">
    <p class="tip">Warn about something</p>
  </div>
</form>

Warn about something

Fieldset

Here's a small text tip

Please include the country code

256 character limit.

Inline Forms

Ink provides a second layout for forms. To get it add the inline class to the form element or replace an existing block class.

Since this layout requires that labels and fields have a set width, we added some classes to help you getting things aligned in a breeze: shorter, short, medium, wide and wider.

Combining these lets you deal with diferent widths of labels and fields. Also you can align tip text by adding a space class and one of the above. Matching the label width class aligns the tip text with the field.

<form action="#" class="ink-form inline">
  <fieldset>
    <legend>Personal data</legend>
    <div class="control required validation error">
      <label for="name" class="short">Name</label>
      <input type="text" id="name" class="wide">
      <p class="tip space short">Here's a small text tip</p>
    </div>
    ...
  </fieldset>
</form>

Checkboxes and radio buttons

To create a list of checkboxes or radio buttons, use an unordered list element, <ul> as your wrapper with the control-group class. If you need to add a label to the field group, add another li element and a p.label inside it. This pseudo-label will also display the icon if the control group contains required fields.

Group of checkboxes
  • Please select one or more options

Group of radio buttons
  • Please select one of these options

<form action="" class="ink-form block">
  <fieldset>
    <legend>Group of checkboxes</legend>
    <ul class="control-group required">
      <li>
        <p class="label">Select one or more options</p>
      </li>
      ...
      <li>
          <input type="checkbox" id="cb4" value="">
          <label for="cb4">Option 4</label>
      </li>
    </ul>
  </fieldset>
</form>
<form action="" class="ink-form block ink-gutter">
  <fieldset>
    <legend>Group of radio buttons</legend>
      <ul class="control-group">
        <li>
          <p class="label">Please select one option.</p>
        </li>
          ...
        <li>
           <input type="radio" id="rb4" value="rbOption">
           <label for="rb4">Option 4</label>
        </li>
      </ul>
  </fieldset>
</form>

Buttons

Your forms will need at least one button. You can crate a button with one of several markup elements, although <button> is most appropriate. Just add the ink-button class for the button layout and then use a utility class to give it a specific meaning. Available styling is shown below.

type active state disabled state code
Info
<button class="ink-button info">Info</button>
<button class="ink-button info" disabled>Info</button>
Default
<button class="ink-button">Default</button>
<button class="ink-button" disabled>Default</button>
Success
<button class="ink-button success">Success</button>
<button class="ink-button success" disabled>Success</button>
Warning
<button class="ink-button warning">Warning</button>
<button class="ink-button warning" disabled>Warning</button>
Caution
<button class="ink-button caution">Caution</button>
<button class="ink-button caution" disabled>Caution</button>