Form Elements

Forms represent a document section that contains interactive controls that enables the user to submit information to a web server.

Input fields

How an <input> works varies considerably depending on the value of its type attribute. If this attributes is not specified, the default type adopted is type="text":

<!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-base" id="--99121" type="text" placeholder="Placeholder" />
    <label class="kx-label" for="--99121">
        Input type: text
    </label>
</div>

Be aware that the many different types available in the specification have various support, even in modern browsers. The look and feel can vary a lot, since the browsers themselves often style the Shadow DOM that is part of such form-controls. The good thing is that if a browser lacks support, the fallback is quite graceful. It often just renders as a regular text-field.

Below is an example of how <input>-elements of different type-attributes are rendered. You should test this page in different browsers to see how they are rendered.

For code examples, please see the component section for each type: color, date, datetime-local, email, file, month, number, password, range, search, tel, time, text, url, week.

Sizes

As with buttons, we provide three different sizes for input fields. They all impact the height, font-size and padding of the field:

  • kx-field--size-tiny
  • kx-field--size-base
  • kx-field--size-large

Remember to use elements of the same size if you put them next to each other on a row. Especially when you use element as part of an input groups.

  • alt text

    Use elements with same modifier for size in input groups.

  • alt text

    Use elements with different modifier for size in input groups.

The width of input fields are default 100% of the parent container. If you need to lay out a form, controlling the width of fields, please put them inside a grid. Also, have a look at form layout for example recipes on form design.

Select

The HTML <select> element represents a control that provides a menu of options. Users make a choice among a list of mutually exclusive values. Users can choose one and only one option. The <select>-element is often referred to as a dropdown list, but should not be confused with similar patterns like dropdown menu or datalist (aka “combo box”).

<label class="kx-label" for="selectbox1">Default select</label>
<div class="select-box select-box--base">
    <select id="selectbox1" class="kx-option">
                <option> Option 1</option>
                <option> Option 2</option>
                <option> Option 3</option>
                </select>
    <div class="select__arrow"></div>
</div>

Sizes

As input fields, the same modifiers for sizes apply to <select>:

  • kx-field--size-small
  • kx-field--size-base
  • kx-field--size-large

Textarea

Sizes

Once again, the same modifiers for size apply. But in this case, <textarea>s are taller elements by nature. Still, the sizes adjust padding and font-size according to the other elements using these size classes.

  • kx-field--size-tiny
  • kx-field--size-base
  • kx-field--size-large

Cols and Rows

According to MDN we kan specify atributes for cols and rows on <textarea>:

cols: We don’t use cols as a way to control width. This is instead done by the surrounding layout container. By default, a textarea will span 100% of it’s parent container.

rows: The number of visible text lines for the control. If no rows-attribute is provided, we give the textarea a default height equal to 5 text-rows in the given font-size (controlled by size):

<div class="kx-form__element">
    <textarea class="kx-field kx-field--size-base" name="" id="--68335">Test</textarea>
    <label class="kx-label" for="--68335">
        Textarea
    </label>
</div>

If you provide the rows-attribute, e.g. rows="2" we respect the initial height of 2 text-rows in the textarea:

<div class="kx-form__element">
    <textarea class="kx-field kx-field--size-base" name="" id="--8670" rows="2">Test</textarea>
    <label class="kx-label" for="--8670">
        Textarea
    </label>
</div>

As resizing should be enabled, all textareas can be resized by the user if their browser supports this feature.

Switches

A “switch” is a common term for form controls that control boolean values; true/false, on/off, yes/no and so forth.

Checkbox

A simple checkbox looks like this:

<label class="kx-ui kx-selector kx-selector__checkbox">
    <input type="checkbox" />
    <div class="kx-selector__indicator"></div>
    <span class="label-text">A checkbox label</span>
</label>

A checkbox controls only the value of itself. This means, multiple checkboxes within a switchgroup can be checked at the same time. They are not mutually exclusive.

<ul class="kx-select-group">

        <li class="kx-select-item">
            <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>

        <li class="kx-select-item">
            <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>

        <li class="kx-select-item">
            <label class="kx-ui kx-selector kx-selector__checkbox">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>

</ul>

Radio Button

A simple radio button looks like this:

<label class="kx-selector kx-selector__radio">
    <input type="radio" />
    <div class="kx-selector__indicator"></div>
    <span class="label-text">A radio label</span>
</label>

A radio button controls the value of related radio buttons within the same switch group. Only one can be selected at any time.

<ul class="kx-select-group">
    <li class="kx-select-item">
            <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>
    <li class="kx-select-item">
            <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>
    <li class="kx-select-item">
            <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>
    </ul>

Toggle

A toggle is a checkbox or radio button, but styled as a slide button:

Once again, if you use checkboxes, multiple can be selected within the same group. If radio buttons are used, selecting one will deselect the others in the group.

This example uses radio buttons:

<ul class="kx-select-group">
    <li class="kx-select-item">
            <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>
    <li class="kx-select-item">
            <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>
    <li class="kx-select-item">
            <label class="kx-selector kx-selector__switch">
                <input type="checkbox" />
                <div class="kx-selector__indicator"></div>

            </label>
        </li>
    </ul>

Text wrapping in switches:

The switch labels are default only as long as the text itself. For longer strings of text, the text will fill the available space provided by the parent container, and wrap the text naturally. Label text should be ideally be short,

Here is an extreme example from Legal Ipsum:

Switch Group Alignment

If you have few options in a switch group, you can add the modifier-class kx-switchgroup--inline to your group. This will give the switches a horizontal layout.

<div class="kx-switchgroup kx-switchgroup--inline">
    <!-- List of 3 buttons layed out horizontally -->
</div>

To optimize the visual scanning of options in a list of switches, we force groups of switches with more than three buttons to stack vertically. Even if you specify the group to be inline.

<div class="kx-switchgroup kx-switchgroup--inline">
    <!-- List of 4 buttons forecd to stack vertically -->
</div>

Fieldset

The HTML <fieldset> element is used to group several controls and labels within a web form. Fieldsets are named using the <legend>-element.

Here is an example:

Sign in 
<fieldset class="kx-fieldset kx-ui">
    <!-- LEGEND Component -->
    <legend class="kx-legend kx-legend--underline">Sign in</legend>
    <div class="kx-fieldset__content">
        <!-- The form elements grouped in fieldset -->
    </div>
</fieldset>

Fieldset legend as label

In some cases you’d like to group several form controls under one label. Since the <label> element is related to a single control, we can use the grouping properties of fieldset and its <legend> for labelling multiple controls.

In the example below, we’ve visually hidden each form label using <label class="kx-label kx-is-vishidden">...</label>. In additions, we’ve used a common <legend> with the class kx-label to make it look as a label:

Add your phone number (optional)