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>
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.
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.
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>
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>
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.
<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>
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> |