UI ELEMENTS

Forms

Form building nightmare made easy.

Basic principles

Forms are a tough thing to implement, especially if you want to include them in a fluid layout, so we made everything work as painlessly as possible while giving you multiple layout choices as you build your forms.

Please note that forms, like other components in Ink, use the grid css classes to create form layouts. So if you haven't looked at the grid documentation yet, we suggest that you give it a read.

CSS CLASSES
Class name Description
ink-form The form root class.
control-group Defines the container for a label / form control pair. Used with a <div> element.
control Defines the container for a form control (e.g. text field, checkbox, etc.). Used with a <div> element nested in the .control-group.
required Defines a required field.
validation Used if you need to print a message upon form submission.
error
warning 		Defines the type of message printed upon form submission.
tip Defines the default ink style for a tip. Used with a paragraph in the form.
  • These classes must be used to make any kind of forms work.

Block forms

  • Css classes:
  • ink-form
  • control-group
  • control
  • tip

This is the most straight forward type of form, since all of its elements are displayed on top of each other, as a block.

<form class="ink-form">
    <div class="control-group">
        <label for="email">Email</label>
        <div class="control">
            <input id="email" name="email" type="text" placeholder="Type some text">
        </div>
    </div>
</form>

Example

Block forms with inline fields

  • Css classes:
  • ink-form
  • control-group
  • control
  • column-group
  • gutters
  • all-%
  • tiny-%
  • small-%
  • medium-%
  • large-%
  • xlarge-%

These form elements are displayed in blocks (labels over fields), but each control group is inline with the previous. For this, Ink lets you use layout classes to build different form field layouts. 

<form class="ink-form">
    <div class="column-group gutters">
        <div class="control-group all-33">
            <label for="name">Name</label>
            <div class="control">
                <input type="text" name="name" id="name">
            </div>
        </div>
        <div class="control-group all-33">
            <label for="phone">Phone</label>
            <div class="control">
                <input type="text" name="phone" id="phone">
            </div>
        </div>
        <div class="control-group all-33">
            <label for="email2">Email</label>
            <div class="control">
                <input type="text" name="email" id="email2">
            </div>
        </div>
    </div>
</form>

Note that the control-group elements are wrapped in a <div> instead of a <fieldset>. This is only required if you're using a flexgrid. The reason for this is that the <fieldset>, such as other form elements, don't recognise the display:flex property, so you need to use one that does.

Example

Inline forms

  • Css classes:
  • ink-form
  • control-group
  • control
  • tip
  • column-group
  • gutters
  • all-%
  • tiny-%
  • small-%
  • medium-%
  • large-%
  • xlarge-%

To make inline forms, Ink makes use of its grid structure to build them for various layouts and screen sizes.

<form class="ink-form">
    <div class="control-group column-group gutters">
        <label for="first-name" class="all-20 align-right">Name</label>
        <div class="control all-80">
            <input type="text" name="first-name" id="first-name">
            <p class="tip">First Name</p>
        </div>
    </div>
</form>

Example

Inline forms with inline fields

  • Css classes:
  • ink-form
  • control-group
  • control
  • tip
  • column-group
  • gutters
  • all-%
  • tiny-%
  • small-%
  • medium-%
  • large-%
  • xlarge-%
<form class="ink-form">
    <div class="column-group gutters">
        <div class="control-group all-33">
            <div class="column-group gutters">
                <label for="inline-name" class="all-20 align-right">Name</label>
                <div class="control all-80">
                    <input type="text" name="name" id="inline-name">
                </div>
            </div>
        </div>
        <div class="control-group all-33">
            <div class="column-group gutters">
                <label for="inline-phone" class="all-20 align-right">Phone</label>
                <div class="control all-80">
                    <input type="text" name="phone" id="inline-phone">
                </div>
            </div>
        </div>
        <div class="control-group all-33">
            <div class="column-group gutters">
                <label for="inline-email" class="all-20 align-right">Email</label>
                <div class="control all-80">
                    <input type="text" name="email" id="inline-email">
                </div>
            </div>
        </div>
    </div>
</form>

Example

Required fields and warnings

  • Css classes:
  • ink-form
  • control-group
  • control
  • required
  • validation
  • error
  • warning
  • tip

Ink forms also has utility classes to address and highlight warnings and required fields. So if you have a required field, generated content will be added to mark your field as required, this way you don't need to do it manually.

Adding tips

Adding tips to forms fields is easy. Just add the message by using a paragraph element with the tip class and keep it inside your control-group. 

<form class="ink-form">
    <div class="control-group">
        <label for="text-input">Text input</label> 
        <div class="control">
            <input name="text" id="text-input" type="text" placeholder="Please input some text">
        </div>
        <p class="tip">You can add tips to fields</p>
    </div>
</form>

Example

You can add tips to fields

Required field

A required field has a red asterisk () indicating that it is mandatory to fill it.

To make a required field, add the required class to its control group. 

<form class="ink-form">
    <div class="control-group required">
        <label for="required-password">Password</label> 
        <div class="control">
            <input name="password" id="required-password" type="password" placeholder="Please enter your password">
        </div>
        <p class="tip">This field is required</p>
    </div>
</form>

Example

This field is required

Field with warning

<form class="ink-form">
    <div class="control-group validation warning">
        <label for="warn-field">A field</label> 
        <div class="control">
            <input id="warn-field" name="a-field" type="text">
        </div>
        <p class="tip">Warn about something</p>
    </div>
</form>

Example

This field is required

Field with errors

To mark a field as an errored field, just add the validation error CSS classes to your control group. The field will have a red border, and tip text will become red as well. 

<form class="ink-form">
    <div class="control-group validation error">
        <label for="error-field">Text input</label> 
        <div class="control">
            <input name="field" id="error-field" type="text" placeholder="Please input some text">
        </div>
        <p class="tip">Your field has errors</p>
    </div>
</form>

Example

Your field has errors

Appended and prepended inputs

  • Css classes:
  • ink-form
  • control-group
  • control
  • prepend-button
  • append-button
  • prepend-symbol
  • append-symbol

Case you need to append or prepend buttons or symbols to your form input, Ink has got that covered aswell. To achieve that, and depending on your use case, just add the class append-button, prepend-button, append-symbol or prepend-symbol to the control element and wrap your <input> in a <span>.

Buttons

  • Css classes:
  • ink-form
  • control-group
  • control
  • prepend-button
  • append-button
<form class="ink-form">
    <div class="column-group horizontal-gutters">
        <!-- Prepend button -->
        <div class="control-group all-50 small-100 tiny-100">
            <div class="control prepend-button" role="search">
                <input type="submit" value="Search" class="ink-button">
                <span><input type="text" name="phone" id="phone"></span>
            </div>
        </div>
        <!-- Append button -->
        <div class="control-group all-50 small-100 tiny-100">
            <div class="control append-button" role="search">
                <span><input type="text" name="name" id="name"></span>
                <button class="ink-button">Search</button>
            </div>
        </div>
    </div>
</form>

Example

Symbols

  • Css classes:
  • ink-form
  • control-group
  • control
  • prepend-symbol
  • append-symbol
<form class="ink-form">
    <div class="column-group horizontal-gutters">
        <!-- Append symbol -->
        <div class="control-group all-50 small-100 tiny-100">
            <div class="control append-symbol">
                <span>
                    <input type="text" name="email" placeholder="email">
                    <i class="fa fa-envelope-o"></i>
                </span>
            </div>
        </div>
        <!-- Prepend symbol -->
        <div class="control-group all-50 small-100 tiny-100">
            <div class="control prepend-symbol">
                <span>
                    <input type="text" name="email" placeholder="email">
                    <i class="fa fa-envelope-o"></i>
                </span>
            </div>
        </div>
    </div>
</form>

Example

Checkboxes and radio buttons

  • Css classes:
  • ink-form
  • control-group
  • control
  • inline
  • label

Lists of checkboxes or radio buttons follow the same structure as the previous examples, only here your inputs should be wrapped by an <ul> with the control class, in place of the <div>. Then, each of your checkbox/label pair needs to be inside a <li>.

Checkboxes

<form class="ink-form">
    <fieldset>
        <legend>Rock Bands</legend>
        <div class="control-group">
            <p class="label">Please select one or more options</p>
            <ul class="control unstyled">
                <li><input type="checkbox" id="cb5" name="cb5" value="Chimaira"><label for="cb5">Chimaira</label></li>
                <li><input type="checkbox" id="cb4" name="cb4" value="Metallica"><label for="cb4">Metallica</label></li>
                <li><input type="checkbox" id="cb3" name="cb3" value="Motorhead"><label for="cb3">Motörhead</label></li>
                <li><input type="checkbox" id="cb2" name="cb2" value="Pantera"><label for="cb2">Pantera</label></li>
                <li><input type="checkbox" id="cb1" name="cb1" value="Slayer"><label for="cb1">Slayer</label></li>
            </ul>
        </div>
    </fieldset>
</form>

Example

Rock Bands

Please select one or more options

Radio buttons

<form class="ink-form">
    <fieldset>
        <legend>Pick a card</legend>
        <div class="control-group">
            <p class="label">Please select one of these options</p>
            <ul class="control unstyled">
                <li><input type="radio" id="rb1" name="rb" value="Ace of Spades"><label for="rb1">Ace of Spades</label></li>
                <li><input type="radio" id="rb2" name="rb" value="Queen of Diamonds"><label for="rb2">Queen of Diamonds</label></li>
                <li><input type="radio" id="rb3" name="rb" value="Queen of Spades"><label for="rb3">Queen of Spades</label></li>
                <li><input type="radio" id="rb4" name="rb" value="Jack of Hearts"><label for="rb4">Jack of Hearts</label></li>
                <li><input type="radio" id="rb5" name="rb" value="King of Clubs"><label for="rb5">King of Clubs</label></li>
            </ul>
        </div>
    </fieldset>
</form>

Example

Pick a card

Please select one of these options

If you need your checkboxes / radio buttons to be displayed inline, add the inline class to the control element.