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-large" id="--33126" type="text" placeholder="Placeholder" />
    <label class="kx-label" for="--33126">
        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”).

<!-- SELECT Component -->
<div class="kx-form__element">
    <select class="kx-field kx-field--size-large" id="--19828">
        <option value="1">Foo</option>
        <option value="2" selected>Bar</option>
        <option value="3">Baz</option>
    </select>
    <label class="kx-label" for="--19828">
        Select Label
    </label>
    </div>

Sizes

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

  • kx-field--size-tiny
  • 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):

<!-- TEXTAREA Component -->
<div class="kx-form__element">
    <textarea class="kx-field kx-field--size-large" name="" id="--5817">Test</textarea>
    <label class="kx-label" for="--5817">
        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:

<!-- TEXTAREA Component -->
<div class="kx-form__element">
    <textarea class="kx-field kx-field--size-large" name="" id="--47643" rows="2">Test</textarea>
    <label class="kx-label" for="--47643">
        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:

<!-- SWITCH checkbox Component -->
<div class="kx-switch kx-switch--checkbox">
    <label class="kx-switch__label" for="a-checkbox-label--73767">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="a-checkbox-label--73767"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">A checkbox label</span>
    </label>
</div>

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.

<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup">
    <div class="kx-switchgroup__inner">
        <!-- SWITCH checkbox Component -->
<div class="kx-switch kx-switch--checkbox">
    <label class="kx-switch__label" for="foo--7427">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="foo--7427" name="group-name-1"  checked="checked"/>
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Foo</span>
    </label>
</div>
        <!-- SWITCH checkbox Component -->
<div class="kx-switch kx-switch--checkbox">
    <label class="kx-switch__label" for="bar--73288">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="bar--73288" name="group-name-1"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Bar</span>
    </label>
</div>
        <!-- SWITCH checkbox Component -->
<div class="kx-switch kx-switch--checkbox">
    <label class="kx-switch__label" for="baz--84056">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="baz--84056" name="group-name-1"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Baz</span>
    </label>
</div>
        </div>
</div>

Radio Button

A simple radio button looks like this:

<!-- SWITCH radio Component -->
<div class="kx-switch kx-switch--radio">
    <label class="kx-switch__label" for="a-radio-label--62035">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="a-radio-label--62035"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">A radio label</span>
    </label>
</div>

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

<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup">
    <div class="kx-switchgroup__inner">
        <!-- SWITCH radio Component -->
<div class="kx-switch kx-switch--radio">
    <label class="kx-switch__label" for="foo--90192">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="foo--90192" name="group-name-2"  checked="checked"/>
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Foo</span>
    </label>
</div>
        <!-- SWITCH radio Component -->
<div class="kx-switch kx-switch--radio">
    <label class="kx-switch__label" for="bar--22755">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="bar--22755" name="group-name-2"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Bar</span>
    </label>
</div>
        <!-- SWITCH radio Component -->
<div class="kx-switch kx-switch--radio">
    <label class="kx-switch__label" for="baz--68345">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="baz--68345" name="group-name-2"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Baz</span>
    </label>
</div>
        </div>
</div>

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:

<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup">
    <div class="kx-switchgroup__inner">
        <!-- SWITCH toggle Component -->
<div class="kx-switch kx-switch--toggle">
    <label class="kx-switch__label" for="foo--94655">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="foo--94655" name="group-name-3"  checked="checked"/>
        <span class="kx-switch__fake" aria-hidden="true">
            <span class="kx-switch__option-left" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../../assets/img/icons/sprites/icons.svg#check"></use>
    </svg>
</i>
            </span>
            <span class="kx-switch__option-right kx-is-hidden" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
            </span>
        </span>
        <span class="kx-switch__label__txt">Foo</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
</div>
        <!-- SWITCH toggle Component -->
<div class="kx-switch kx-switch--toggle">
    <label class="kx-switch__label" for="bar--33411">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="bar--33411" name="group-name-3"  />
        <span class="kx-switch__fake" aria-hidden="true">
            <span class="kx-switch__option-left" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../../assets/img/icons/sprites/icons.svg#check"></use>
    </svg>
</i>
            </span>
            <span class="kx-switch__option-right kx-is-hidden" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
            </span>
        </span>
        <span class="kx-switch__label__txt">Bar</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
</div>
        <!-- SWITCH toggle Component -->
<div class="kx-switch kx-switch--toggle">
    <label class="kx-switch__label" for="baz--11119">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="baz--11119" name="group-name-3"  />
        <span class="kx-switch__fake" aria-hidden="true">
            <span class="kx-switch__option-left" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../../assets/img/icons/sprites/icons.svg#check"></use>
    </svg>
</i>
            </span>
            <span class="kx-switch__option-right kx-is-hidden" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
            </span>
        </span>
        <span class="kx-switch__label__txt">Baz</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
</div>
        </div>
</div>

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)