Forms

Examples of building forms


Elements doesn’t include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities.

Here are a few examples to help you get an idea of how to build components like this using Elements.

Form Group

We'll never share your email with anyone else.
We'll never share your email with anyone else.
We'll never share your email with anyone else.
We'll never share your email with anyone else.
We'll never share your email with anyone else.
<!-- Form group xl -->
<div class="mb-8">
<label class="block text-dark font-medium text-lg" for="exampleInputEmail1">Email address</label>
<small id="emailHelp" class="mb-4 form-text text-gray-400">We'll never share your email with anyone else.</small>
<div class="input-group input-group-xl icon-left icon-right">
<svg class="icon icon--envelope-outline text-gray-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-envelope-outline"></use></svg>
<input type="email" class="input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<svg class="icon icon--check text-green-300" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg>
</div>
</div>
<!-- Form group lg -->
<div class="mb-8">
<label class="block text-dark font-medium text-lg" for="exampleInputEmail1">Email address</label>
<small id="emailHelp" class="mb-4 form-text text-gray-400">We'll never share your email with anyone else.</small>
<div class="input-group input-group-lg icon-left icon-right">
<svg class="icon icon--envelope-outline text-gray-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-envelope-outline"></use></svg>
<input type="email" class="input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<svg class="icon icon--check text-green-300" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg>
</div>
</div>
<!-- Form group md -->
<div class="mb-8">
<label class="block text-dark font-medium text-lg" for="exampleInputEmail1">Email address</label>
<small id="emailHelp" class="mb-4 form-text text-gray-400">We'll never share your email with anyone else.</small>
<div class="input-group input-group-md icon-left icon-right">
<svg class="icon icon--envelope-outline text-gray-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-envelope-outline"></use></svg>
<input type="email" class="input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<svg class="icon icon--check text-green-300" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg>
</div>
</div>
<!-- Form group sm -->
<div class="mb-8">
<label class="block text-dark font-medium text-lg" for="exampleInputEmail1">Email address</label>
<small id="emailHelp" class="mb-4 form-text text-gray-400">We'll never share your email with anyone else.</small>
<div class="input-group input-group-sm icon-left icon-right">
<svg class="icon icon--envelope-outline text-gray-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-envelope-outline"></use></svg>
<input type="email" class="input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<svg class="icon icon--check text-green-300" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg>
</div>
</div>
<!-- Form group xs -->
<div class="mb-8">
<label class="block text-dark font-medium text-lg" for="exampleInputEmail1">Email address</label>
<small id="emailHelp" class="mb-4 form-text text-gray-400">We'll never share your email with anyone else.</small>
<div class="input-group input-group-xs icon-left icon-right">
<svg class="icon icon--envelope-outline text-gray-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-envelope-outline"></use></svg>
<input type="email" class="input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<svg class="icon icon--check text-green-300" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg>
</div>
</div>