Form control

This component is a monster, CSS-wise. That is due to the fact that this component styles more than the wrapper it's applied to – it style all kinds of form controls (<input>, <select>, <textarea>) within it. Why? Well, in some cases the text fields or checkboxes are output via some server rendered code where styling them directly is complicated. To add a wrapper class is therefore more convenient. Also, you don't have to change and markup if your inputs change from say type="text" to type="search".

When to use it

Add a <div class="c-form-control"> around every form input, is the general recommendation.

Variants

When displaying form controls next to each other, adding c-form-control--inline can be a solution. There may also be a need for smaller och larger text input and that's when c-form-control--small or c-form-control--large variants come in handy.

A c-form-control--compact variant exists as well for when the label is supposed to be on top of the text input.

When c-form-control--group is applied the buttons get grouped together with the input field. If no input is present, the buttons stay rounded at the start en end of the group but "glued together" visually.

What it looks like

INFO

Note that the searchability of some of the <select>'s in the code above is due to the fact that a third party library (ChosenJS) is triggered automatically. To disable this, use a data-disable-search attribute.

Code examples

Normal

<div class="c-form-control">
    <label for="id5" class="c-label">Normal label</label>
    <input id="id5" type="text" placeholder="firstname.lastname" />
</div>

Compact

<div class="c-form-control c-form-control--compact">
    <label for="id6" class="c-label">Compact label</label>
    <input id="id6" type="text" />
</div>

With error

<div class="c-form-control has-error">
    <label for="id7" class="c-label">Normal label, error</label>
    <input id="id7" type="text" class="input-validation-error" />
    <span class="c-box c-box--small c-box--negative">Form error message</span>
</div>

Grouped

<div class="c-form-control c-form-control--compact c-form-control--group">
    <label for="id94b" class="c-label">E-mail (with value)</label>
    <input id="id94b" type="email" value="test@example.com" />
    <input class="c-button c-button--primary" type="submit" value="Submit" />
</div>

Accessibility notes

When creating forms, it is crucial to establish a clear relationship between form fields and their corresponding error messages. This ensures that assistive technologies, such as screen readers, can accurately convey the error information to users with disabilities. By using appropriate ARIA attributes like aria-describedby or linking the error message to the input field, you enhance the accessibility and usability of your forms for all users.