4 Form

Colette comes with basic CSS to style form’s elements.

4.1 Form Component

Description

A colette form should have form class to benefit every features provided This class can be used for fake forms

4.1.1 Busy status

Description

You can apply an animated “waiting” status on a form (after submitting for example): if you add the aria-busy="true" to the <form> tag, you will get a Loading animation over it.

Example

Markup 
<form class="form" action="#" aria-busy="true">
    <div class="form-field pb2">
        <p>
            <label for="textarea">Textarea</label>
            <textarea id="textarea" row="4" cols="50">Textarea</textarea>
        </p>
    </div>
</form>
<form class="form" action="#" aria-busy="true">
    <div class="form-field pb2">
        <p>
            <label for="textarea">Textarea</label>
            <textarea id="textarea" row="4" cols="50">Textarea</textarea>
        </p>
    </div>
</form>

Source: src/styl/_components/_form.styl, line 11

4.2 Required Marker

Description

Provide styles for a required field marker, most often associated with the label.

Example

Markup 
<label>This is the label of a require field <abbr class="required" title="(ce champ est obligatoire)">*</abbr></label>
<label>This is the label of a require field <abbr class="required" title="(ce champ est obligatoire)">*</abbr></label>

Source: src/styl/_elements/_required.styl, line 1

4.3 Form field

Description

Form field component provides styles for:

  • Field label
  • Valid / invalid fields status

Default styling

Modifiers

.form-field-success

valid field format

.form-field-error

invalid field format

Markup 
<form action="#">
    <div class="form-field">
        <p>
            <label for="form-field-default">Label</label>
            <input class="" type="text" id="form-field-default" />
        </p>
    </div>
</form>
{% set id = 'form-field-' ~ modifier_class|default('default')|replace({' ': '_'}) %}
<form action="#">
    <div class="form-field">
        <p>
            <label for="{{ id }}">Label</label>
            <input class="{{ modifier_class }}" type="text" id="{{ id }}" />
        </p>
    </div>
</form>

Source: src/styl/_components/_form.styl, line 36

4.4 Text inputs

Description

Default styles for text fields.

Example

Markup 
<form action="#">
    <div class="form-field pb2">
        <label for="textWithPlaceholder">Text field with a placeholder</label>
        <input id="textWithPlaceholder" type="text" placeholder="Placeholder text" />
    </div>
    <div class="form-field pb2">
        <label for="textReadOnly">Read only text field</label>
        <input id="textReadOnly" type="text" value="This is a 'read only' text field" readonly />
    </div>
    <div class="form-field pb2">
        <label for="textDisabled">Disabled text field</label>
        <input id="textDisabled" type="text" value="This text field is disabled" disabled />
    </div>
    <div class="form-field pb2">
        <label for="textPassword">Password text field</label>
        <input id="textPassword" type="password" value="password" />
    </div>
</form>
<form action="#">
    {% for textfield in textfields %}
        <div class="form-field pb2">
            <label for="{{ textfield.id }}">{{ textfield.label }}</label>
            <input id="{{ textfield.id }}" type="{{ textfield.type }}"
                {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
                {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
                {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
            />
        </div>
    {% endfor %}
</form>

Source: src/styl/_base/form/text.styl, line 1

4.5 Form help

Description

Form help component provides styles for fields descriptions, with valid / invalid color indications. It can be used in combination with Form field to highlight the valid / invalid status of their related fields.
Note that you can also use Alerts component to handle success or error messages.

Default styling

Modifiers

.form-help-success

help text for valid field format

.form-help-error

help text for invalid field format

Markup 
<form action="#">
    <p>
        <input class="" type="text" />
    </p>
    <p class="form-help " role="alert">Help text</p>
</form>
<form action="#">
    <p>
        <input{% if 'link' not in modifier_class %} class="{{ modifier_class|replace({'help': 'field' }) }}"{% endif %} type="text" />
    </p>
    <p class="form-help {{ modifier_class }}" role="alert">Help text</p>
</form>

Source: src/styl/_components/_form.styl, line 64

4.6 HTML5 inputs

Description

Colette styles also apply to the following HTML5 input types.
Fields display and interaction may vary according to browsers supports.

Example

Markup 
<form action="#">
    <div class="form-field pb2">
        <label for="textURL">URL input field</label>
        <input id="textURL" type="url" value="http://www.url.com" />
    </div>
    <div class="form-field pb2">
        <label for="textTime">Time input field</label>
        <input id="textTime" type="time" />
    </div>
    <div class="form-field pb2">
        <label for="textDate">Date input field</label>
        <input id="textDate" type="date" />
    </div>
    <div class="form-field pb2">
        <label for="Number">Number input</label>
        <input id="Number" type="number" />
    </div>
    <div class="form-field pb2">
        <label for="Search">Search field</label>
        <input id="Search" type="search" />
    </div>
</form>
<form action="#">
    {% for textfield in textfields %}
        <div class="form-field pb2">
            <label for="{{ textfield.id }}">{{ textfield.label }}</label>
            <input id="{{ textfield.id }}" type="{{ textfield.type }}"
                {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
                {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
                {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
            />
        </div>
    {% endfor %}
</form>

Source: src/styl/_base/form/text.styl, line 11

4.7 Form single input

Description

Display, on a single row, an input field + fixed-width icon submit button.

White and editorial colors are available to style the button according to its context.

Default styling

Modifiers

.btnSkin-transparent

transparent color button

.btnSkin-sport

sport color button

.btnSkin-entertainment

entertainment color button

.btnSkin-economy

economy color button

.btnSkin-community

community color button

.btnSkin-weird

weird color button

.btnSkin-partner

partner color button

.btnSkin-planet

planet color button

.btnSkin-media

media color button

.btnSkin-hightech

hightech color button

Markup 
<form class="formSingleInput" action="#">
    <input class="formSingleInput-input" type="text" placeholder="Input field" />
    <button class="formSingleInput-btn " type="submit">
        <svg>
            <use xlink:href="#symbol-magnifier"></use>
        </svg>
        <span class="mask">ok</span>
    </button>
</form>
<form class="formSingleInput" action="#">
    <input class="formSingleInput-input" type="text" placeholder="Input field" />
    <button class="formSingleInput-btn {{ modifier_class }}" type="submit">
        <svg><use xlink:href="#symbol-magnifier"></use></svg>
        <span class="mask">ok</span>
    </button>
</form>

Source: src/styl/_elements/_formSingleInput.styl, line 1

4.9 Select

Description

Default styles for <select> field.

Example

Markup 
<form action="#">
    <div class="form-field">
        <label for="select">Select</label>
        <select id="select">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
        </select>
    </div>
</form>
<form action="#">
    <div class="form-field">
        <label for="select">Select</label>
        <select id="select">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
        </select>
    </div>
</form>

Source: src/styl/_base/form/_select.styl, line 1

4.10 Textarea

Description

Default styles for <textarea> field.

Example

Markup 
<form action="#">
    <div class="form-field">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" row="4" cols="50">default value</textarea>
    </div>
</form>
<form action="#">
    <div class="form-field">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" row="4" cols="50">default value</textarea>
    </div>
</form>

Source: src/styl/_base/form/_textarea.styl, line 1

4.11 Radio buttons

Description

Default styles for radio buttons. Styling method takes a lot of inspiration from Materialize CSS.

Example

Markup 
<form action="#">
    <div>
        <input id="radioButton1" name="radioButtonGroup" type="radio">
        <label for="radioButton1">Label</label>
    </div>
    <div>
        <input id="radioButton2" name="radioButtonGroup" type="radio">
        <label for="radioButton2">Label</label>
    </div>
    <div>
        <input id="radioButton3" name="radioButtonGroup" type="radio">
        <label for="radioButton3">Label</label>
    </div>
</form>
<form action="#">
    <div>
        <input id="radioButton1" name="radioButtonGroup" type="radio">
        <label for="radioButton1">Label</label>
    </div>
    <div>
        <input id="radioButton2" name="radioButtonGroup" type="radio">
        <label for="radioButton2">Label</label>
    </div>
    <div>
        <input id="radioButton3" name="radioButtonGroup" type="radio">
        <label for="radioButton3">Label</label>
    </div>
</form>

Source: src/styl/_base/form/_radioCheckbox.styl, line 1

4.12 Checkboxes

Description

Default styles for checkboxes. Styling method takes a lot of inspiration from Materialize CSS.

Example

Markup 
<form action="#">
    <div>
        <input id="checkbox1" name="checkbox1" type="checkbox">
        <label for="checkbox1">Label</label>
    </div>
    <div>
        <input id="checkbox2" name="checkbox2" type="checkbox">
        <label for="checkbox2">Label</label>
    </div>
    <div>
        <input id="checkbox3" name="checkbox3" type="checkbox">
        <label for="checkbox3">Label</label>
    </div>
</form>
<form action="#">
    <div>
        <input id="checkbox1" name="checkbox1" type="checkbox">
        <label for="checkbox1">Label</label>
    </div>
    <div>
        <input id="checkbox2" name="checkbox2" type="checkbox">
        <label for="checkbox2">Label</label>
    </div>
    <div>
        <input id="checkbox3" name="checkbox3" type="checkbox">
        <label for="checkbox3">Label</label>
    </div>
</form>

Source: src/styl/_base/form/_radioCheckbox.styl, line 12

4.13 Special Choice Radio buttons

Description

Specific styles for radio buttons. Radio Buttons will look like buttons.

Example

Choississez une option
Markup 
<form action="#">
    <div class="choice">
        <legend>Choississez une option</legend>
        <ul class="choice-list g g-withgutters">
            <li class="g-col-6">
                <input type="radio" id="radio-1" name="test" value="option-1">
                <label for="radio-1">Option 1</label>
            </li>
            <li class="g-col-6">
                <input type="radio" id="radio-2" name="test" value="option-2">
                <label for="radio-2">Option 2</label>
            </li>
        </ul>
    </div>
</form>
<form action="#">
    <div class="choice">
        <legend>Choississez une option</legend>
        <ul class="choice-list g g-withgutters">
            <li class="g-col-6">
                <input type="radio" id="radio-1" name="test" value="option-1">
                <label for="radio-1">Option 1</label>
            </li>
            <li class="g-col-6">
                <input type="radio" id="radio-2" name="test" value="option-2">
                <label for="radio-2">Option 2</label>
            </li>
        </ul>
    </div>
</form>

Source: src/styl/_elements/_choice.styl, line 1

4.14 Range

Description

Default styles for <input type="range" /> field. the thumb take color of currentColor, so it .color-xxx classes can be used to style it.

Default styling

Modifiers

.color-default

color helper

Markup 
<form action="#">
    <div class="form-field">
        <label for="range">Range</label>
        <input id="range" class="" type="range" min="0" max="11" />
    </div>
</form>
<form action="#">
    <div class="form-field">
        <label for="range">Range</label>
        <input id="range" class="{{ modifier_class }}" type="range" min="0" max="11" />
    </div>
</form>

Source: src/styl/_base/form/_range.styl, line 1