Forms

stablev1.0.0

Suffer no more, using the Design System form components, you’ll get an awesome form in the blink of an eye.

Overview

Use these classes to globally style your forms, particularly its input and textarea elements.

Usage

Dependencies

To get the forms working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/form';

Basic code

To create the most basic input, we need a div element, with the class form-group wrapping the label and input elements together. These two elements have to have the classes form-group__label and form-group__item respectively added to each one.

  1. HTML
  2. Pug
<div class="form-group">
  <label class="form-group__label" for="inputID">Input</label>
  <input class="form-group__item" id="inputID" placeholder="Placeholder text" type="text">
</div>

.form-group
  label.form-group__label(for="inputID") Input
  input.form-group__item#inputID(placeholder="Placeholder text", type="text")

Modifiers

Add the following modifier to change the appearance of your forms.

Required fields

To indicate that some field is mandatory in our form, we add an asterisk to its label. This asterisk should be wrapped by a span tag with a .form-group__asterisk class, which in turn has to be inside the .form-group__label element.

  1. HTML
  2. Pug
<!-- Input example -->
<div class="form-group">
  <label class="form-group__label" for="requiredInput">
    Required input:
    <span class="form-group__asterisk" title="Required field">*</span>
  </label>
  <input class="form-group__item" id="requiredInput" type="text" placeholder="Wow, such indispensable..." required="required">
</div>

<!-- Textarea example -->
<div class="form-group">
  <label class="form-group__label" for="requiredTextarea">
    Required textarea:
    <span class="form-group__asterisk" title="Required field">*</span>
  </label>
  <textarea class="form-group__item" id="requiredTextarea" type="textarea" placeholder="Wow, such indispensable..." required="required"></textarea>
</div>

// Input example
.form-group
  label.form-group__label(for="requiredInput") Required input:
    span.form-group__asterisk(title="Required field") *
  input.form-group__item#requiredInput(type="text" placeholder="Wow, such indispensable..." required="required")

// Textarea example
.form-group
  label.form-group__label(for="requiredTextarea") Required textarea:
    span.form-group__asterisk(title="Required field") *
  textarea.form-group__item#requiredTextarea(type="textarea" placeholder="Wow, such indispensable..." required="required")

Spacing multiple fields

When creating a multi-field form, we need to add vertical spacing between the different rows of fields. We achieve this effect through the use of the --spaced modifier.

  1. HTML
  2. Pug
<!-- First field -->
<div class="form-group form-group--spaced">
  <label class="form-group__label" for="firstInputField">First field</label>
  <input class="form-group__item" id="firstInputField" type="text" placeholder="First field">
</div>

<!-- Second field -->
<div class="form-group form-group--spaced">
  <label class="form-group__label" for="secondInputField">Second field</label>
  <input class="form-group__item" id="secondInputField" type="text" placeholder="Second field">
</div>

<!-- Third field -->
<div class="form-group form-group--spaced">
  <label class="form-group__label" for="thirdInputField">Third field</label>
  <input class="form-group__item" id="thirdInputField" type="text" placeholder="Third field">
</div>

// First field
.form-group.form-group--spaced
  label.form-group__label(for="inputID") First field
  input.form-group__item#inputID(type="text", placeholder="First field")

// Second field
.form-group.form-group--spaced
  label.form-group__label(for="inputID") Second field
  input.form-group__item#inputID(type="text", placeholder="Second field")

// Third field
.form-group.form-group--spaced
  label.form-group__label(for="inputID") Third field
  input.form-group__item#inputID(type="text", placeholder="Third field")

Messages

For each .form-group that we have, we can add a custom message through a small element with the .form-group__msg class applied to it.

What a wonderful world
  1. HTML
  2. Pug
<!-- Message field -->
<div class="form-group">
  <label class="form-group__label" for="inputID">Message field field</label>
  <input class="form-group__item" id="inputID" type="text" placeholder="Message field field">
  <small class="form-group__msg">What a wonderful world</small>
</div>

// Message field
.form-group
  label.form-group__label(for="inputID") Message field
  input.form-group__item#inputID(type="text", placeholder="Message field")
  small.form-group__msg What a wonderful world

Addons

In certain inputs, we may add a visual aid to indicate units, additional information, etc...

To accomplish this, we group the input element with a span tag which has the form-group__addon class applied, and wrap them inside a form-group__item-addon class div.

kWh
m2
Left sideRight side
  1. HTML
  2. Pug
<!-- Example with left addon -->
<div class="form-group">
  <label class="form-group__label" for="addonLeft">Left addon:</label>
  <div class="form-group__item-addon">
    <span class="form-group__addon" title="hourly kilowatts">kWh</span>
    <input class="form-group__item" id="addonLeft" type="text" placeholder="Your consumption">
  </div>
</div>

<!-- Example with right addon -->
<div class="form-group">
  <label class="form-group__label" for="addonRight">Right addon:</label>
  <div class="form-group__item-addon">
    <input class="form-group__item" id="addonRight" type="text" placeholder="Surface">
    <span class="form-group__addon" title="square meter">m<sup>2</sup></span>
  </div>
</div>

<!-- Example with addons on both sides -->
<div class="form-group">
  <label class="form-group__label" for="addonBoth">Addon on both sides:</label>
  <div class="form-group__item-addon">
    <span class="form-group__addon" title="left side addon">Left side</span>
    <input class="form-group__item" id="addonBoth" type="text" placeholder="Look ma, no hands!!">
    <span class="form-group__addon" title="right side addon">Right side</span>
  </div>
</div>

// Example with left addon
.form-group
  label.form-group__label(for='addonLeft') Left addon:
  .form-group__item-addon
    span.form-group__addon(title='hourly kilowatts') kWh
    input#addonLeft.form-group__item(type='text', placeholder='Your consumption')

// Example with right addon
.form-group
  label.form-group__label(for='addonRight') Right addon:
  .form-group__item-addon
    input#addonRight.form-group__item(type='text', placeholder='Surface')
    span.form-group__addon(title='square meter') m
      sup 2

// Example with addons on both sides
.form-group
  label.form-group__label(for='addonBoth') Addon on both sides:
  .form-group__item-addon
    span.form-group__addon(title='left side addon') Left side
    input#addonBoth.form-group__item(type='text', placeholder='Look ma, no hands!!')
    span.form-group__addon(title='right side addon') Right side

States

Mostly used along with validations, we may want to convey some status to our inputs. We need to add any of the following classes to the form-group:

  • .form-group--has-success
  • .form-group--has-warning
  • .form-group--has-danger
Additionally, we can add a specific class to the .form-group__msg element to style it accordingly:
  • .form-group__msg--success
  • .form-group__msg--warning
  • .form-group__msg--danger

Success message
Warning message
Danger message
  1. HTML
  2. Pug
<!-- Success state -->
<div class="form-group form-group--has-success">
  <label class="form-group__label" for="successInput">Error status</label>
  <input class="form-group__item" id="successInput" type="text" placeholder="First field">
  <small class="form-group__msg form-group__msg--success">Success message</small>
</div>

<!-- Warning state -->
<div class="form-group form-group--has-warning">
  <label class="form-group__label" for="warningInput">Warning status</label>
  <input class="form-group__item" id="warningInput" type="text" placeholder="Second field">
  <small class="form-group__msg form-group__msg--warning">Warning message</small>
</div>

<!-- Danger state -->
<div class="form-group form-group--has-danger">
  <label class="form-group__label" for="dangerInput">Danger status</label>
  <input class="form-group__item" id="dangerInput" type="text" placeholder="Third field">
  <small class="form-group__msg form-group__msg--danger">Danger message</small>
</div>

// Success state
.form-group.form-group--has-success
  label.form-group__label(for="successInput") Error status
  input.form-group__item#successInput(type="text", placeholder="First field")
  small.form-group__msg.form-group__msg--success Success message

// Warning state
.form-group.form-group--has-warning
  label.form-group__label(for="warningInput") Warning status
  input.form-group__item#warningInput(type="text", placeholder="Second field")
  small.form-group__msg.form-group__msg--warning Warning message

// Danger state
.form-group.form-group--has-danger
  label.form-group__label(for="dangerInput") Danger status
  input.form-group__item#dangerInput(type="text", placeholder="Third field")
  small.form-group__msg.form-group__msg--danger Danger message

HTML attributes

Through HTML attributes we can disable our input and textarea elements.

Disabled

If you need your element disabled, it suffice to add the disabled="disabled" attribute to the input or textarea itself.

  1. HTML
  2. Pug
<!-- Example 1 -->
<div class="form-group">
  <label class="form-group__label" for="disabledInput">Disabled input</label>
  <input class="form-group__item" id="disabledInput" placeholder="How are you?" type="text" disabled="disabled">
</div>

<!-- Example 2 -->
<div class="form-group">
  <label class="form-group__label" for="disabledTextarea">Disabled textarea</label>
  <textarea class="form-group__item" id="disabledTextarea" placeholder="How are you?" type="textarea" disabled="disabled"></textarea>
</div>

// Example 1
.form-group
  label.form-group__label(for="disabledInput") Disabled input
  input.form-group__item#disabledInput(placeholder="How are you?", type="text", disabled="disabled")

// Example 1
.form-group
  label.form-group__label(for="disabledTextarea") Disabled textarea
  textarea.form-group__item#disabledTextarea(placeholder="How are you?", type="textarea", disabled="disabled")