Section 5
#Forms
Forms
Out of the box, our form fields have a margin-top added to them. This spacing should work just fine for smaller, simple forms. For larger, responsive forms, we recommend that you utilize the block layout and our spacers to build the perfect form.
Note All of the following form elements must be nested inside the form class to get the desired look.
Example:
Markup:
Markup
<form action="" class="form">
<label for="first-name-a" class="form__field">First Name
<input id="first-name-a" type="text" placeholder="First Name">
</label>
<label for="last-name" class="form__field">Last Name
<input id="last-name" type="text" placeholder="Last Name">
</label>
</form>sass/_forms.scss, line 8
Section 5.1
#Forms.Border
Form Border
This modifier class adds a full border to each input within the form. Just add form--bordered
Example:
Markup:
Markup
<form action="" class="form form--bordered block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
<div class="block">
<label for="first-name" class="form__field">First Name
<input id="first-name" type="text" placeholder="First Name">
</label>
</div>
<div class="block">
<label for="last-name" class="form__field">Last Name
<input id="last-name" type="text" placeholder="Last Name">
</label>
</div>
<div class="block">
<label for="dob" class="form__field">Birthday
<input id="dob" type="date">
</label>
</div>
<div class="block">
<label for="zipcode" class="form__field">ZIP Code
<input id="zipcode" type="tel" placeholder="e.g.90012" pattern="^\d{5,6}(?:[-\s]\d{4})?$">
</label>
</div>
</form>sass/_forms.scss, line 74
Section 5.2
#Forms.BorderRounded
Form Rounded Border
This modifier class adds a full border with a 5rem radius to each input within the form. Just add form--rounded.
If you want to give the label an indented look, we suggest moving the form__field class to a wrapping div containing
both the label and input as siblings. This way, you can add something like ml-2 to the label to align it closer to
the padding of the rounded input. Checkout the markup below.
Example:
Markup:
Markup
<form action="" class="form form--rounded block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
<div class="block form__field">
<label class="ml-2" for="first-name">First Name</label>
<input id="first-name" type="text" placeholder="First Name">
</div>
<div class="block form__field">
<label class="ml-2" for="last-name">Last Name</label>
<input id="last-name" type="text" placeholder="Last Name">
</div>
<div class="block form__field">
<label class="ml-2" for="dob">Birthday</label>
<input id="dob" type="date">
</div>
<div class="block form__field">
<label class="ml-2" for="zipcode">ZIP Code</label>
<input id="zipcode" type="tel" placeholder="e.g.90012" pattern="^\d{5,6}(?:[-\s]\d{4})?$">
</div>
</form>sass/_forms.scss, line 105
Section 5.3
#Forms.Error
Error styles
If there is an error on a specific input after submission, add the error class to the specific form__field.
Note If you add the error class to a form__field that contains check boxes or radios, each input in that
field will receive the error styling. However, if you only want to highlight on specific check or radio, simply add
error to the proper input. This will give the icon as well as the corresponding label the error style.
Example:
Markup:
Markup
<form action="" class="form block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
<div class="block">
<label for="first-name" class="form__field">First Name
<input id="first-name" type="text" placeholder="First Name">
</label>
</div>
<div class="block">
<label for="last-name" class="form__field error">Last Name
<input id="last-name" type="text" placeholder="Last Name">
</label>
</div>
<div class="block">
<label for="dob" class="form__field">Birthday
<input id="dob" type="date">
</label>
</div>
<div class="block">
<label for="zipcode" class="form__field">ZIP Code
<input id="zipcode" type="tel" placeholder="e.g.90012" pattern="^\d{5,6}(?:[-\s]\d{4})?$">
</label>
</div>
<div class="block">
<fieldset class="form__field error">
<legend>Error on entire fieldset</legend>
<div class="form__option-group">
<input class="form__checkbox" id="youcan-this-one" type="checkbox">
<label for="youcan-this-one">
<div class="input-icons">
<i class='pi-circle'></i>
<i class='pi-check pi-heavy'></i>
</div>This
</label>
<input class="form__checkbox" id="youcan-that-one" type="checkbox">
<label for="youcan-that-one">
<div class="input-icons">
<i class='pi-circle'></i>
<i class='pi-check pi-heavy'></i>
</div>That
</label>
</div>
</fieldset>
</div>
<div class="block">
<fieldset class="form__field">
<legend>Error on individual input</legend>
<div class="form__option-group">
<input class="form__checkbox error" id="a-gender-this-one" type="checkbox">
<label for="a-gender-this-one">
<div class="input-icons">
<i class='pi-circle'></i>
<i class='pi-check pi-heavy'></i>
</div>
This One
</label>
<input class="form__checkbox" id="a-gender-that-one" type="checkbox">
<label for="a-gender-that-one">
<div class="input-icons">
<i class='pi-circle'></i>
<i class='pi-check pi-heavy'></i>
</div>
That One
</label>
</div>
</fieldset>
</div>
</form>sass/_forms.scss, line 195
Section 5.4
#Forms.Fancy
Fancy Forms
You want a fancy form that animates the label? You got it.
To get the animation, add the class form__field--fancy to the form__field.
You will also need to change the markup slightly. Instead of a label the form__field should now be a div
put the label under the input as a sibling of the form__field div. See markup below.
In order to account for the transform of the label, we increased the margin-top on inputs inside a fancy form field. This can be changed by using a spacing modifier, however.
Note: Firefox does not have a way to hide the date and time placeholder for those inputs. This style of form would probably be best for a simple form that has text inputs.
Example:
Markup:
Markup
<form action="" class="form">
<div class="form__field form__field--fancy">
<input id="first-name" type="text" required placeholder="Jane">
<label for="first-name">First Name</label>
</div>
<div class="form__field form__field--fancy">
<input id="last-name" type="text" required placeholder="Smith">
<label for="last-name">Last Name</label>
</div>
<div class="form__field form__field--fancy">
<input id="zipcode" type="tel" pattern="^\d{5,6}(?:[-\s]\d{4})?$" required placeholder="12345">
<label for="zipcode">ZIP Code</label>
</div>
<div class="form__field form__field--fancy">
<div class="form__select-wrapper">
<select name="Option Select" id="Option" required placeholder="Option">
<option value=""></option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
<option value="Option6">Option 6</option>
</select>
<label for="Option">Option</label>
</div>
</div>
</form>sass/_forms.scss, line 28
Section 5.5
#Forms.HasIcon
Has Icon
If you would like the icon to be on the right side of the input, add the class has-icon--right to the form__field class.
Example:
Markup:
Markup
<form action="" class="form block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
<div class="block">
<label for="dob" class="form__field has-icon--right">Birthday
<input id="dob" type="date">
<i class="pi-calendar background-white"></i>
</label>
</div>
<div class="block">
<label for="date" class="form__field has-icon">Date
<input id="date" type="date">
<i class="pi-calendar text-med-blue background-white"></i>
</label>
</div>
<div class="block">
<label for="time" class="form__field has-icon--right">Your Time
<input id="time" type="time" placeholder="10:00 AM">
<i class="pi-clock"></i>
</label>
</div>
<div class="block">
<label for="Option" class="form__field has-icon--right">Option
<div class="form__select-wrapper">
<select name="Option Select" id="Option">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
<option value="Option6">Option 6</option>
</select>
</div>
<i class="pi-plus text-med-blue"></i>
</label>
</div>
</form>sass/_forms.scss, line 274
Section 5.6
#Forms.InputCheckbox
Input - Checkbox
The platform check boxes require some specific markup to get the look you see in the example below.
In this case, be sure to add <div class="input-icons"> your label. Inside this <div class="input-icons">
add the font icons for the look of the checkbox, in this case we need <i class='pi-circle pi-lg'></i> and
<i class='pi-check'></i>. Each of these need to be siblings, nested inside the input-icons wrapper. Be
sure to add the pi-lg class to the pi-circle icon. This way, the circle will be large enough to allow the
checkmark to fit properly. You can try different sizes for the icons by using the font icons size utilities.
You can wrap the inputs and labels in the class form__option-group. This class will ensure the proper top margin,
consistent with the rest of the form elements. It also allows the inputs inside the field to wrap using display: flex
and flex-wrap: wrap. If you do not want the items to wrap, but rather look like block level elements, you can simplay add
different utility classes to the form__option-group wrapper. In this case, flex--column and flex--nowrap.
Note For better semantics, it would be best to wrap the check boxes in a fieldset using this element as your
form__field then adding a legend. See the example below.
Example:
Markup:
Markup
<form action="" class="form block-container">
<div class="block block-4">
<fieldset class="form__field">
<legend>Choose</legend>
<div class="form__option-group">
<input id="choose-this-one" type="checkbox">
<label for="choose-this-one">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-check pi-heavy'></i>
</div>
This One
</label>
<input id="choose-that-one" type="checkbox">
<label for="choose-that-one">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-check pi-heavy'></i>
</div>
That One
</label>
<input id="choose-that-one-2" type="checkbox">
<label for="choose-that-one-2">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-check pi-heavy'></i>
</div>
Or This One
</label>
<input id="choose-that-one-3" type="checkbox">
<label for="choose-that-one-3">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-check pi-heavy'></i>
</div>
Or Even That One
</label>
</div>
</fieldset>
</div>
</form>sass/_forms.scss, line 319
Section 5.7
#Forms.InputRadio
Input - Radio
Radio buttons in platform UI are almost identical to how the check boxes work. Only different here is the input type and the font icon that shows when the input is checked.
The platform radios require some specific markup to get the look you see in the example below.
In this case, be sure to add <div class="input-icons"> your label. Inside this <div class="input-icons">
add the font icons for the look of the radio, in this case we need <i class='pi-circle pi-lg'></i> and
<i class='pi-circle-solid'></i>. Each of these need to be siblings, nested inside the input-icons wrapper. Be
sure to add the pi-lg class to the pi-circle icon. This way, the circle will be large enough to allow the
dot to fit properly. You can try different sizes for the icons by using the font icons size utilities.
You can wrap the inputs and labels in the class form__option-group. This class will ensure the proper top margin,
consistent with the rest of the form elements. It also allows the inputs inside the field to wrap using display: flex
and flex-wrap: wrap. If you do not want the items to wrap, but rather look like block level elements, you can simplay add
different utility classes to the form__option-group wrapper. In this case, flex--column and flex--nowrap.
Note For better semantics, it would be best to wrap the radios in a fieldset using this element as your
form__field then adding a legend. See the example below.
Example:
Markup:
Markup
<form action="" class="form block-container">
<div class="block block-4">
<fieldset class="form__field">
<legend>Pick one</legend>
<div class="form__option-group">
<input id="choose-big" type="radio" name="choose-one">
<label for="choose-big">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-circle-solid'></i>
</div>
Big
</label>
<input id="choose-small" type="radio" name="choose-one">
<label for="choose-small">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-circle-solid'></i>
</div>
Small
</label>
<input id="choose-bigger" type="radio" name="choose-one">
<label for="choose-bigger">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-circle-solid'></i>
</div>
Bigger
</label>
<input id="choose-smaller" type="radio" name="choose-one">
<label for="choose-smaller">
<div class="input-icons">
<i class='pi-circle pi-lg'></i>
<i class='pi-circle-solid'></i>
</div>
Smaller
</label>
</div>
</fieldset>
</div>
</form>sass/_forms.scss, line 383
Section 5.8
#Forms.Lighht
Form Light
Adding a form--light modifier gives the form a white theme. Thhe text color and border colors are both white.
The light modifier works with form--bordered and form--rounded.
Example:
Markup:
Markup
<div class="background-navy p-3">
<form action="" class="form form--light block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
<div class="block form__field">
<label for="first-name">First Name</label>
<input id="first-name" type="text" placeholder="First Name" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</div>
<div class="block form__field">
<label for="last-name">Last Name</label>
<input id="last-name" type="text" placeholder="Last Name">
</div>
<div class="block form__field">
<label for="dob">Birthday</label>
<input id="dob" type="date">
</div>
<div class="block form__field">
<label for="zipcode">ZIP Code</label>
<input id="zipcode" type="tel" placeholder="e.g.90012" pattern="^\d{5,6}(?:[-\s]\d{4})?$">
</div>
</form>
</div>sass/_forms.scss, line 135
Section 5.9
#Forms.Putting
Putting it together
Here's an example of a larger responsive form using the block layout.
sass/_forms.scss, line 449
Section 5.10
#Forms.Readonly
Readonly Input
This style is for editable inputs as well as textareas. If you want to display the text or value of an
input but disable the ability to edit it, add the readonly attribute as well as the class readonly
to the input or textarea. In your javascript only toggle the readonly attribute on or off when the user
would select the option to edit the text.
NOTE: The js- classes in the example below are just for test purposes. You do not need them.** |
|---|
Example:
Markup:
Markup
<form action="" class="pui-form">
<div class="block-container">
<div class="block block-10">
<label for="first-name" class="pui-form__field">
<span class="sr-only">Read only input example</span>
<input id="first-name" type="text" placeholder="First Name" class="readonly" readonly value="This is a readonly input. When you select edit, the readonly attribute will be removed.">
</label>
</div>
<div class="block block-2 flex flex--align-center flex--justify-end">
<div class="icon-menu">
<div class="icon-menu__item">
<a href="#" class="icon-menu__action text-positive--hover js-edit-readonly" role="button">
<i class="pi-edit" aria-hidden="hidden"></i>
</a>
</div>
<div class="icon-menu__item">
<a href="#" class="icon-menu__action text-negative--hover" role="button">
<i class="pi-trash" aria-hidden="hidden"></i>
</a>
</div>
</div>
</div>
</div>
<div class="block-container">
<div class="block block-10">
<label for="message" class="pui-form__field">
<span class="sr-only">Read only input example</span>
<textarea id="message" name="message" class="readonly js-textarea" readonly>This is a readonly textarea. When you select edit, the readonly attribute will be removed.</textarea>
</label>
</div>
<div class="block block-2 flex flex--align-center flex--justify-end">
<div class="icon-menu">
<div class="icon-menu__item">
<a href="#" class="icon-menu__action text-positive--hover js-edit-textarea" role="button">
<i class="pi-edit" aria-hidden="hidden"></i>
</a>
</div>
<div class="icon-menu__item">
<a href="#" class="icon-menu__action text-negative--hover" role="button">
<i class="pi-trash" aria-hidden="hidden"></i>
</a>
</div>
</div>
</div>
</div>
</form>sass/_forms.scss, line 1320
Section 5.11
#Forms.Selects
Select
To get this look you see in the example below, be sure to wrap your select in the class, form__select-wrapper.
This allows for the angle down arrow to show. We're using a pseudo element to create the angle down arrow here. Since
you can not add a pseudo element to a select we wrapped it in a div. The class, form__select-wrapper also
allows for consistent spacing with the other form elements. If you wish to have a different arrow, you can remove the
form__select-wrapper class but be sure to add the proper top margin to the element you use to wrap your select.
Example:
Markup:
Markup
<form action="" class="form block-container">
<div class="block block-4">
<label for="Option" class="form__field">Option
<div class="form__select-wrapper">
<select name="Option Select" id="Option">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
<option value="Option6">Option 6</option>
</select>
</div>
</label>
</div>
</form>sass/_forms.scss, line 572
Section 5.12
#Forms.TimeIcon
Time Icon
The select wrapper displays an arrow down icon. We can change that by adding the class time
to the class form__select-wrapper. So the classes would be form__select-wrapper time.
This will replace the arrow down icon with a clock icon.
Example:
Markup:
Markup
<form action="" class="form block-container">
<div class="block block-4">
<label for="task-1-time" class="form__field">
<span class="sr-only">Time Icon Example</span>
<div class="form__select-wrapper time" id="task-1-time">
<select class="px-2" name="Select a time" id="task-1-time-select">
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
</select>
<i class="pi-clock"></i>
</div>
</label>
</div>
</form>sass/_forms.scss, line 166
Section 5.13
#Forms.Toggle
Toggle Option
To create this toggle effect around 2 radio buttons you need to wrap the set of inputs in a <div class="pui-toggle">.
From there, be sure to add your input, followed by it's label. These elements should be sibligns of one another and
children of the pui-toggle. Each pair of inputs and children should be siblings of one another.
From a semantic perspective, we would recommend not using check boxes inside the toggle. The reason being that one option needs to be checked for the toggle to make sense. Also, the toggle works so you that you could never select both options.
We put the toggle inside a fieldset in the example below, but this is not required for the toggle to work.
Example:
Markup:
Markup
<form class="pui-form">
<div class="block-container">
<fieldset class="pui-form__field block-4">
<legend>Are You</legend>
<div class="pui-toggle">
<input id="Tall-2" type="radio" checked name="height">
<label for="Tall-2">
<i class='pi-check pi-heavy'></i> Tall
</label>
<input id="Short-2" type="radio" name="height">
<label for="Short-2">
<i class='pi-check pi-heavy'></i> Short
</label>
</div>
</div>
</fieldset>
</form>sass/_forms.scss, line 1385
Section 5.14
#Forms.ToggleDisabled
Toggle Option Disabled
If the toggle needs to be disabled, simply add the attribute disabled to a fieldset wrapping the pui-toggle. See the markup below.
Example:
Markup:
Markup
<form class="pui-form">
<div class="block-container">
<fieldset class="pui-form__field block-4" disabled>
<legend>Are You</legend>
<div class="pui-toggle">
<input id="Tall-2" type="radio" checked name="height">
<label for="Tall-2">
<i class='pi-check pi-heavy'></i> Tall
</label>
<input id="Short-2" type="radio" name="height">
<label for="Short-2">
<i class='pi-check pi-heavy'></i> Short
</label>
</div>
</div>
</fieldset>
</form>sass/_forms.scss, line 1419
Section 5.15
#Forms.ToggleSmall
Toggle Option Small
For a smaller toggle component, use the class toggle-small. This is a great option for a checkbox. The idea for this toggle is to
use only one input and label. Think of it as a light switch. One item, one or off.
Example:
Markup:
Markup
<form class="pui-form">
<div class="block-container">
<fieldset class="pui-form__field block-4">
<legend>Active</legend>
<div class="toggle-small">
<input id="active" type="checkbox" name="active">
<label for="active">
</label>
</div>
</div>
</fieldset>
</form>sass/_forms.scss, line 1560