Form Elements

This page contains the usual elements that you will need when building a form. When they are combined with the form grid, found here, you can build responsive forms.

Make sure that you are following accessibility best practices when you are building your forms.

Checkbox

<div class="dk-checkbox-group">
        <input
            type="checkbox"
            class="dk-checkbox"
            id="dk-cb1"
        />
        <label
            class="dk-checkbox-label"
            for="dk-cb1">
            One
        </label>
    </div>
    <div class="dk-checkbox-group">
        <input
            type="checkbox"
            class="dk-checkbox"
            id="dk-cb2"
        />
        <label
            class="dk-checkbox-label"
            for="dk-cb2">
            Two
        </label>
    </div>
    <div class="dk-checkbox-group">
        <input
            type="checkbox"
            class="dk-checkbox"
            id="dk-cb3"
        />
        <label
            class="dk-checkbox-label"
            for="dk-cb3">
            Three
        </label>
    </div>
    <div class="dk-checkbox-group">
        <input
            type="checkbox"
            class="dk-checkbox"
            id="dk-cb4"
        />
        <label
            class="dk-checkbox-label"
            for="dk-cb4">
            Four
        </label>
    </div>

Usage

Create a wrapping div with the CLASS of dk-checkbox-group
Adding CLASS of dk-checkbox on the Input, immediately followed by a LABEL element will then add the corresponding styles to create our checkboxes. - Also add the input type of checkbox to set the element(s) to be a checkboxes. - To connect both the Input with the Label first give the Input an 'ID', second on Label add 'FOR'. You will then give them the same name in each declaration.

Always use unique IDs as you can only have one per page.

Toggle Checkbox

A useful element for when you need to show whether something is toggled on or off. Used very much like a checkbox but visually conveys a slightly different meaning.

<input
        type="checkbox"
        class="dk-checkbox--toggle"
        id="dk-toggle-cb-1"
    />
    <label
        class="mr-1 dk-checkbox-label"
        for="dk-toggle-cb-1">
        Toggle One
    </label>
    <input
        type="checkbox"
        class="dk-checkbox--toggle"
        id="dk-toggle-cb-2"
    />
    <label
        class="dk-checkbox-label"
        for="dk-toggle-cb-2">
        Toggle Two
    </label>

Radio Buttons

<div class="dk-radio-group">
        <input
            type="radio"
            name="radio"
            class="dk-radio"
            id="dk-rb1"
        />
        <label
            class="dk-radio-label"
            for="dk-rb1">
            One
        </label>
    </div>
    <div class="dk-radio-group">
        <input
            type="radio"
            name="radio"
            class="dk-radio"
            id="dk-rb2"
        />
        <label
            class="dk-radio-label"
            for="dk-rb2">
            Two
        </label>
    </div>
    <div class="dk-radio-group">
        <input
            type="radio"
            name="radio"
            class="dk-radio"
            id="dk-rb3"
        />
        <label
            class="dk-radio-label"
            for="dk-rb3">
            Three
        </label>
    </div>
    <div class="dk-radio-group">
        <input
            type="radio"
            name="radio"
            class="dk-radio"
            id="dk-rb4"
        />
        <label
            class="dk-radio-label"
            for="dk-rb4">
            Four
        </label>
    </div>

Usage

Note: To see checked state style of the radio button simply click on the button.

Adding CLASS of dk-radio on the Input, immediately followed by a Label element will then add the corresponding styles to create our radio buttons.
Also add the input type of radio to set the element(s) to be a radio button.
To connect both the Input with the Label first give the Input an ID, second on Label add FOR. You will then give them the same name in each declaration.Always use unique IDs as you can only have one per page.

Form Input

Form Input Field:

Make a wrapping div with the CLASS of dk-input-group.
Inside of the wrapping div place the LABEL element with the CLASS of dk-input-label. Set the for attribute to the same value as the ID on the input.
Add CLASS dk-input to the INPUT element to style the input correctly
Every input needs a unique id and a label with a for attribute that matches the id of the input it belongs to. If you are grouping multiple inputs together, every input still needs a label. If the label doesn't need to be present visually you can add the sr-only class to hide it visually but still make it available to screen readers.

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <input
            type="text"
            id="labelInput"
            placeholder="Placeholder Text"
            class="dk-input"
        />
    </div>

Form Input Field with Helper Text:

Setup the input like normal
Add a SMALL element right above the input where you want the helper text to be displayed.
Add the CLASS of dk-input-helper to that SMALL element.

<div class="dk-input-group">
        <label
            for="labelInput"
            class="dk-input-label">
            Input Label
        </label>
        <small class="dk-input-helper">
            This is an example of some
            instructional text
        </small>
        <input
            type="text"
            id="labelInput"
            class="dk-input"
        />
    </div>

Error Field:

To make an INPUT show an error state and show an error message add the CLASS dk-error to the dk-input-group or to an individual input in the group.
To give the user feedback on why the form has an error use a SMALL element with the CLASS dk-error-message.
Inside this element place your error message. By default this field is not displayed unless the dk-input-group has dk-error. If you want to have an error message that is always visible you can use the dk-error-message__visible CLASS. That class will make the message always visible and it's up to you to hide and show it.

<div class="dk-input-group">
        <label
            for="errorInput"
            class="dk-input-label">
            Field with error
        </label>
        <input
            type="text"
            id="errorInput"
            class="dk-input dk-input--error"
        />
        <small class="dk-input__error-feedback">
            User Name or Password is incorrect
        </small>
    </div>

Disabled Field:

Add the disabled attribute to the INPUT field

<div class="dk-input-group">
        <label
            for="disabledInput"
            class="dk-input-label">
            Disabled field
        </label>
        <input
            type="text"
            id="disabledInput"
            placeholder="Disabled Field"
            disabled=""
            class="dk-input"
        />
    </div>