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.
Form Group Labels
Adding the class dk-form-group-label to a <label> tag will style the label to appear like the standard form labels used with inputs and dropdowns. This class name can be used to add labels to groups of checkboxes, radios, or any other grouping of form elements.
Checkboxes
- Create a wrapping div with the CLASS of
dk-checkbox-wrapper. - Create a container div with the CLASS of
dk-checkbox-groupfor each line/horizontal grouping of checkboxes. - Adding CLASS of
dk-checkboxon the Input, immediately followed by a LABEL element will then add the corresponding styles to create our checkboxes. - Also add the input type ofcheckboxto 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.
<div
class="dk-checkbox-wrapper"
style="max-width:300px">
<label class="dk-form-group-label">
Checkbox group label
</label>
<div class="dk-checkbox-group">
<input
type="checkbox"
class="dk-checkbox"
id="dk-cb1"
/>
<label
class="dk-checkbox-label"
for="dk-cb1">
Option 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">
Option two
</label>
</div>
<div class="dk-checkbox-group">
<input
type="checkbox"
class="dk-checkbox"
id="dk-cb6"
/>
<label
class="dk-checkbox-label"
for="dk-cb6">
Extra long text for the checkbox
label that wraps and displays as
multiple lines to show how the
checkbox will align
</label>
</div>
<div class="dk-checkbox-group">
<input
type="checkbox"
class="dk-checkbox dk-checkbox--error"
id="dk-cb3"
/>
<label
class="dk-checkbox-label"
for="dk-cb3">
Error unchecked
</label>
</div>
<div class="dk-checkbox-group">
<input
type="checkbox"
class="dk-checkbox dk-checkbox--error"
id="dk-cb5"
checked=""
/>
<label
class="dk-checkbox-label"
for="dk-cb5">
Error checked
</label>
</div>
<div class="dk-checkbox-group">
<input
type="checkbox"
disabled=""
class="dk-checkbox"
id="dk-cb4"
/>
<label
class="dk-checkbox-label"
for="dk-cb4">
Disabled
</label>
</div>
<small class="dk-error-message">
Required
</small>
</div>
<div class="dk-checkbox-wrapper">
<label class="dk-form-group-label">
Checkbox horizontal group label
</label>
<div class="dk-checkbox-group">
<input
type="checkbox"
class="dk-checkbox"
id="dk-cb8"
/>
<label
class="dk-checkbox-label"
for="dk-cb8">
One
</label>
<input
type="checkbox"
class="dk-checkbox"
id="dk-cb9"
/>
<label
class="dk-checkbox-label"
for="dk-cb9">
Two
</label>
<input
type="checkbox"
class="dk-checkbox"
id="dk-cb10"
/>
<label
class="dk-checkbox-label"
for="dk-cb10">
Three
</label>
</div>
</div>Always use unique IDs as you can only have one per page.
Toggle Checkboxes
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. Toggle checkboxes are setup just like standard checkboxes with the difference of dk-checkbox--toggle on the checkbox input. Toggles are available in a larger size by using the dk-checkbox--toggle-lg class name.
<div class="dk-checkbox-wrapper">
<div class="dk-checkbox-group">
<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>
</div>
</div>
<div class="dk-checkbox-wrapper">
<div class="dk-checkbox-group">
<input
type="checkbox"
class="dk-checkbox--toggle dk-checkbox--toggle-lg"
id="dk-toggle-cb-3"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-toggle-cb-3">
Toggle One
</label>
<input
type="checkbox"
class="dk-checkbox--toggle dk-checkbox--toggle-lg"
id="dk-toggle-cb-4"
/>
<label
class="dk-checkbox-label"
for="dk-toggle-cb-4">
Toggle Two
</label>
</div>
</div>Button Checkboxes
Button checkboxes have a slightly different format than standard checkboxes.
- Create a wrapping div with the CLASS of
dk-checkbox-wrapperto contain all the checkbox buttons in a grouping. - Create a div with the CLASS of
dk-checkbox--buttonfor each checkboxes. - Adding CLASS of
dk-checkboxon the Input, immediately followed by a LABEL element will then add the corresponding styles to create our checkboxes. - Also add the input type ofcheckboxto 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. - Icons are added as
<span>tags with one of the icon class names.
<div class="dk-checkbox-wrapper">
<label class="dk-form-group-label">
Checkbox Buttons
</label>
<div class="dk-checkbox--button">
<input
type="checkbox"
class="dk-checkbox"
id="dk-button-cb-3"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-button-cb-3">
Button One
</label>
</div>
<div class="dk-checkbox--button">
<input
type="checkbox"
class="dk-checkbox"
id="dk-button-cb-4"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-button-cb-4">
Button Two
</label>
</div>
</div>
<div class="dk-checkbox-wrapper">
<label class="dk-form-group-label">
Checkbox Buttons with Icon
</label>
<div class="dk-checkbox--button">
<input
type="checkbox"
class="dk-checkbox"
id="dk-button-cb-5"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-button-cb-5">
<span class="icon-floppy"></span>{' '}
Button One
</label>
</div>
<div class="dk-checkbox--button">
<input
type="checkbox"
class="dk-checkbox"
id="dk-button-cb-6"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-button-cb-6">
<span class="icon-file-pdf"></span>{' '}
Button Two
</label>
</div>
</div>
<div class="dk-checkbox-wrapper">
<label class="dk-form-group-label">
Error
</label>
<div class="dk-checkbox--button">
<input
type="checkbox"
class="dk-checkbox dk-checkbox--error"
id="dk-button-cb-7"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-button-cb-7">
Button One
</label>
</div>
<div class="dk-checkbox--button">
<input
type="checkbox"
class="dk-checkbox input-validation-error"
id="dk-button-cb-8"
/>
<label
class="mr-1 dk-checkbox-label"
for="dk-button-cb-8">
Button Two
</label>
</div>
<small class="dk-error-message">
Required
</small>
</div>Radio Buttons
- Create a wrapping div with the CLASS of
dk-radio-wrapperto contain all the radio buttons in a grouping. - Adding CLASS of
dk-radioon 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
radioto 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 addFOR. You will then give them the same name in each declaration. Always use unique IDs as you can only have one per page.
<div
class="dk-radio-wrapper"
style="max-width:300px">
<label class="dk-form-group-label">
radio group label
</label>
<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-rb5"
/>
<label
class="dk-radio-label"
for="dk-rb5">
Extra long text for the radio
label that wraps and displays as
multiple lines to show how the
radio will align
</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>
<div class="dk-radio-group">
<input
type="radio"
name="radio"
class="dk-radio dk-radio--error"
id="dk-rb6"
/>
<label
class="dk-radio-label"
for="dk-rb6">
Error
</label>
</div>
<div class="dk-radio-group">
<input
type="radio"
name="radio"
class="dk-radio input-validation-error"
id="dk-rb8"
/>
<label
class="dk-radio-label"
for="dk-rb8">
Another Error
</label>
</div>
<div class="dk-radio-group">
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rb7"
disabled=""
/>
<label
class="dk-radio-label"
for="dk-rb7">
Disabled
</label>
</div>
<small class="dk-error-message">
Required
</small>
</div>
<div class="dk-radio-wrapper">
<label class="dk-form-group-label">
Horizontal Radio Group Label
</label>
<div class="dk-radio-group">
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rb8"
/>
<label
class="dk-radio-label"
for="dk-rb9">
One
</label>
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rb9"
/>
<label
class="dk-radio-label"
for="dk-rb9">
Two
</label>
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rb10"
/>
<label
class="dk-radio-label"
for="dk-rb10">
Three
</label>
</div>
</div>Radio Button Buttons
- Create a wrapping div with the CLASS of
dk-radio-wrapperto contain all the radio buttons in a grouping. - Create a div with the CLASS of
dk-checkbox--buttonfor each checkboxes. - Adding CLASS of
dk-checkboxon the Input, immediately followed by a LABEL element will then add the corresponding styles to create our checkboxes. - Also add the input type ofcheckboxto 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. - Icons are added as
<span>tags with one of the icon class names.
<div class="dk-radio-wrapper">
<label class="dk-form-group-label">
Radio Button Buttons
</label>
<div class="dk-radio--button">
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rbbutton1"
/>
<label
class="mr-1 dk-radio-label"
for="dk-rbbutton1">
One
</label>
</div>
<div class="dk-radio--button">
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rbbutton2"
/>
<label
class="mr-1 dk-radio-label"
for="dk-rbbutton2">
Two
</label>
</div>
</div>
<div class="dk-radio-wrapper">
<label class="dk-form-group-label">
Multiple Lines
</label>
<div class="dk-radio--button">
<input
type="radio"
name="radio"
class="dk-radio"
id="dk-rbbutton3"
/>
<label
class="mr-1 dk-radio-label"
for="dk-rbbutton3">
Line One
<br />
Line Two
<br />
Line Three
</label>
</div>
</div>
<div class="dk-radio-wrapper">
<label class="dk-form-group-label">
Error
</label>
<div class="dk-radio--button">
<input
type="radio"
name="radio"
class="dk-radio dk-radio--error"
id="dk-rbbutton4"
/>
<label
class="mr-1 dk-radio-label"
for="dk-rbbutton4">
One
</label>
</div>
<div class="dk-radio--button">
<input
type="radio"
name="radio"
class="dk-radio input-validation-error"
id="dk-rbbutton6"
/>
<label
class="mr-1 dk-radio-label"
for="dk-rbbutton6">
Two
</label>
</div>
<small class="dk-error-message">
Required
</small>
</div>
<div class="dk-radio-wrapper">
<label class="dk-form-group-label">
Disabled
</label>
<div class="dk-radio--button">
<input
type="radio"
name="radio"
class="dk-radio"
disabled=""
id="dk-rbbutton5"
/>
<label
class="mr-1 dk-radio-label"
for="dk-rbbutton5">
Two
</label>
</div>
</div>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-inputto the INPUT element to style the input correctly - Every input needs a unique id and a label with a
forattribute 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 thesr-onlyclass 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"
/>
<label
for="labelInput"
class="dk-input-label">
Number Only Input Label
</label>
<input
type="number"
pattern="[0-9]*"
min="0"
id="labelInput"
placeholder="123456"
autoComplete="false"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Email Address Input Label
</label>
<input
type="email"
min="0"
id="labelInput"
placeholder="email@address.com"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Phone Number Input Label
</label>
<input
type="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
min="0"
id="labelInput"
placeholder="123-456-7890"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Date Input Label
</label>
<input
type="date"
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-helperto 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-errorto thedk-input-groupor 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-grouphasdk-error. If you want to have an error message that is always visible you can use thedk-error-message__visibleCLASS. 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-error-message">
User Name or Password is incorrect
</small>
</div>
<br class="" />
<div class="dk-input-group">
<input
type="text"
id="errorInput"
class="dk-input dk-input--error"
/>
<span class="dk-input__error-feedback">
User Name or Password is incorrect
</span>
</div>Disabled Field:
- Add the
disabledattribute to the INPUT field
<div class="dk-input-group">
<label
for="disabledInput"
class="dk-input-label">
Disabled field
</label>
<input
id="disabledInput"
type="text"
placeholder="Disabled Field"
disabled=""
class="dk-input"
/>
</div>