Eventival Styleguide / Components / Forms

Forms

Forms gather information from users via inputs, such as text boxes, text areas, selects, checkboxes, and radio buttons. Labels sit atop these inputs.

Overview

We are heavily based on bootstrap forms, so look there for more info. We differ in base states (hover, focus, active), handling checkboxes, radio buttons and in general we have simplified syntax and do not support all features.

Form layouts

<form>
  <div class="form-group">
    <label for="">Label text</label>
    <input type="text" placeholder="Enter data" id="someId">
  </div>
</form>

Vertical forms

Create vertical forms with the grid by adding the .elastic-grid--vertical class to the form tag.

English Czech 
	  <form class="elastic-grid--vertical">
    <div class="form-group">
      <label for="custom-id">Date not available for festival:</label>
      <input type="text" id="custom-id">
    </div>
    <div class="form-group">
      <label for="country">Spoken language:</label>
      <div class="flex-wrap">
        <select id="country">
          <option value="" selected disabled hidden>Select</option>
          <option>Czech Republic</option>
          <option>Norway</option>
          <option>Poland</option>
        </select>
        <div>
          <span class="tag">English <a href=#><i class="fal fa-search"></i></a></span>
          <span class="tag">Czech <a href=#><i class="fal fa-search"></i></a></span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="time">Request for interpreter:</label>
      <div>
        <input class="form-check-input" id="checkbox-1" type="checkbox" value="value1">
        <label for="checkbox-1"></label>
      </div>
    </div>
  </form>

Vertical forms + Highlighted forms

When you use the vertical form you can also consider using the .form--highlighted-labels class to emphasize the labels like in the following custom forms example.

Reset fields
Delete all values 
<div class="card">
  <form class="form--highlighted-labels elastic-grid--vertical">
    <div class="form-group">
      <label for="checkbox-10">When do you have time?</label>
      <input class="form-check-input" id="checkbox-10" type="checkbox" value="value1">
      <label for="checkbox-10">Monday</label>
      <input class="form-check-input" id="checkbox-2" type="checkbox" value="value2" checked>
      <label for="checkbox-2">Tuesday</label>
      <input class="form-check-input" id="checkbox-3" type="checkbox" value="value3" checked>
      <label for="checkbox-3">Wednesday</label>
      <input class="form-check-input" id="checkbox-4" type="checkbox" value="value4" disabled>
      <label for="checkbox-4">Thursday</label>
    </div>
    <div class="form-group">
      <label for="volunteerActivity">What do you want to do?</label>
      <select id="volunteerActivity">
        <option value="" selected disabled hidden>Select..</option>
        <option value="gardening">Gardening</option>
        <option value="babysitting">Babysitting</option>
        <option value="drawing">Drawing</option>
        <option value="running">Running</option>
      </select>
    </div>
    <div class="form-group">
      <label for="exampleRadios">Can you stay for the party?</label>
      <input class="form-check-input" type="radio" name="exampleRadios" id="iExampleRadios1" value="option1" checked>
      <label for="iExampleRadios1">
          Yes
      </label>
      <input class="form-check-input" type="radio" name="exampleRadios" id="iExampleRadios2" value="option2">
      <label for="iExampleRadios2">
        No
      </label>
      <a class="link db" href="#">Reset fields</a>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1" class="mt4">Upload your photo</label>
      <div class="btn-photo-group">
        <button type="button" class="btn btn--action-outline"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
      </div>
    </div>
    <div class="flex-gap--right mt4">
      <a class="link" href="#"><i class="fal fa-trash-alt"></i> Delete all values</a>
    </div>
  </form>
</div>

Horizontal forms

Create horizontal forms with the grid by using the elastic grid class - .elastic-grid--horizontal-12 or if you need form fields to be wider use .elastic-grid--horizontal-20.

English Czech Russian 
<form>
  <div class="elastic-grid--horizontal-12">
    <div class="form-group">
      <label for="personCreation">Title</label>
      <select id="personCreation">
        <option>Mr.</option>
        <option>Ms.</option>
        <option>Miss</option>
        <option>Signore</option>
        <option>Signora</option>
      </select>
    </div>
    <div class="form-group">
      <label for="firstName" class="required">First name</label>
      <input type="text" id="firstName" placeholder="First name" required>
    </div>
    <div class="form-group">
      <label for="lastName" class="required">Last name</label>
      <input type="text" id="lastName" placeholder="Last name" required>
    </div>
    <div class="form-group">
      <label for="personCreation">Gender</label>
      <select id="personCreationGender">
        <option>Male</option>
        <option>Female</option>
        <option>Other</option>
      </select>
    </div>
    <div class="form-group">
      <label for="title_before">Academic title (before)</label>
      <input type="text" id="title_before">
    </div>
    <div class="form-group">
      <label for="title_after">Local first name</label>
      <input type="text" id="title_before">
    </div>
    <div class="form-group">
      <label for="title_after">Local last name</label>
      <input type="text" id="title_before">
    </div>
    <div class="form-group">
      <label for="personCreation">Nationality</label>
      <select id="personCreationGender2">
        <option value="" selected disabled hidden>Select</option>
        <option>Czech</option>
        <option>Polish</option>
        <option>Russian</option>
      </select>
    </div>
      <div class="form-group">
        <label for="title_after">Academic title (after)</label>
        <input type="text" id="title_after">
      </div>
      <div class="form-group">
        <label for="vocative">Vocative</label>
        <input type="text" id="vocative">
      </div>
      <div class="form-group">
        <label for="birthDate">Birth date</label>
        <div class="js-datepicker--basic datepicker datepicker--basic">
          <input type="text" placeholder="Select date" id="birthDate" data-input>
          <i class="far fa-calendar-alt" data-toggle></i>
        </div>
      </div>
      <div class="form-group">
        <label for="personCreation">Citizenship</label>
        <select id="personCreationGender2">
          <option value="" selected disabled hidden>Select</option>
          <option>Czech</option>
          <option>Polish</option>
          <option>Russian</option>
        </select>
      </div>
    <div class="form-group">
      <label for="personCreation">Languages</label>
      <select id="personCreationGender2">
        <option value="" selected disabled hidden>Select</option>
        <option>Czech</option>
        <option>Polish</option>
        <option>Russian</option>
      </select>
      <div class="mt2">
        <span class="tag">English <a href=#><i class="fal fa-search"></i></a></span>
        <span class="tag">Czech <a href=#><i class="fal fa-search"></i></a></span>
        <span class="tag">Russian <a href=#><i class="fal fa-search"></i></a></span>
      </div>
    </div>
  </div>
  <div>
    <label for="upload1">Photo</label>
    <div class="btn-photo-group">
      <button type="button" class="btn btn--action-outline"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
      <button type="button" class="btn btn--action-outline"><i class="fa fa-camera" aria-hidden="true"></i> Capture from camera</button>
    </div>
  </div>
</form>

Standalone components

Use to solicit a short, single line of text or a number. Use when the user must enter a name, email address, phone number, street address, etc.

We'll never share your email with anyone else. 
<form>
  <label for="email">Email address</label>
  <input type="email" id="emailT" placeholder="Enter email">
  <small id="emailHelp" class="form-text muted">We'll never share your email with anyone else.</small>
</form>

Components with inline items

Use mainly in the lightboxes. Add the .form--inline class to the form tag. Use .form-group to separate input fields with labels from another input fields. Put the input and the last element into the div tag. This last element usually contains:


English Czech 
  <form class="elastic-grid--vertical form--inline">
    <div class="form-group">
     <label for="country">Business card:</label>
     <div>
       <select id="country">
         <option value="" selected disabled hidden>Private - Prague - Czech Republic</option>
         <option>Czech Republic</option>
         <option>Norway</option>
         <option>Poland</option>
       </select>
       <div class="form-group__icons">
         <i class="fal fa-pencil-alt"></i>
         <i class="fal fa-trash-alt"></i>
       </div>
     </div>
    </div>
    <div class="form-group">
     <label for="country">Directing status:</label>
     <div>
       <select id="country">
         <option value="" selected disabled hidden>First film</option>
         <option>Second film</option>
         <option>Third film</option>
         <option>More</option>
       </select>
       <div class="form-group__icons">
         <i class="fal fa-pencil-alt"></i>
       </div>
     </div>
    </div>
    <div class="form-group">
     <label for="birthDate">Availability from:</label>
     <div class="js-datepicker--basic datepicker datepicker--basic">
       <input type="text" placeholder="Select date" id="birthDate" data-input>
       <i class="far fa-calendar-alt" data-toggle></i>
     </div>
    </div>
    <div class="form-group">
     <label for="custom-id">Date not available for festival:</label>
     <input type="text" id="custom-id">
    </div>
    <div class="form-group">
     <label for="country">Spoken language:</label>
     <div class="flex-wrap">
       <select id="country">
         <option value="" selected disabled hidden>Select</option>
         <option>Czech Republic</option>
         <option>Norway</option>
         <option>Poland</option>
       </select>
       <div>
         <span class="tag">English <a href=#><i class="fal fa-search"></i></a></span>
         <span class="tag">Czech <a href=#><i class="fal fa-search"></i></a></span>
       </div>
     </div>
    </div>
    <div class="form-group">
     <label for="time">Request for interpreter:</label>
     <div>
       <input class="form-check-input" id="checkbox-1" type="checkbox" value="value1">
       <label for="checkbox-1"></label>
     </div>
    </div>
  </form>

Description of component parts

Labels

Use to describe a form input and indicate whether the input is required or optional. Clearly written labels should eliminate the need for placeholder text in text boxes and text areas.

Placeholders

Avoid using placeholder text by making sure the label above the text box is clear. If you still need additional instructional context, consider a Tooltip next to the label header or microcopy under the label, so the helper content doesn't disappear when a user starts typing.

Form controls

Textual form controls—like inputs, select lists and textareas — are styled with in the same way. Included are styles for general appearance, focus state, sizing, and more.

To separate blocks of input use .form-group class which applies small margin to the bottom.

Help text

Block-level help text in forms can be created by using .form-text. Feel free to add .muted class to designifying the importance.

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

  <input class="readonly" type="text" placeholder="Readonly input here…" readonly>

Readonly plain text

If you want to have elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

  <input placeholder="Readonly plain text" readonly>
<form>
  <div class="form-group">
    <label for="staticEmail">Email</label>
    <input type="text" readonly class="form-control-plaintext readonly" id="staticEmail" value="email@example.com">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
      <input class="readonly" type="password" id="inputPassword" placeholder="Password">
  </div>
</form>

Required fields

To mark a required field, use class .required which place an asterix before the label above this field.

Email is actually needed to proceed. 
<div class="form-group">
  <label for="email" class="required">Email address</label>
  <input type="email" id="emailX" placeholder="Enter email">
  <small id="emailHelp2" class="form-text muted">Email is actually needed to proceed.</small>
</div>

Range inputs

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Textarea

Use when soliciting multiple lines of text.

  <form>
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea id="exampleFormControlTextarea1" rows="3" class="res-vertical"></textarea>
  </form>

Selects

Use when affording a single selection from a predefined list of options.

<form>
  <select id="genderx">
    <option value="" selected disabled hidden>Gender..</option>
    <option value="person"><i class="ev-icon icon-add-people"></i>People</option>
    <option value="company"><i class="ev-icon icon-add-company"></i>Company</option>
    <option value="event"><i class="ev-icon icon-add-event"></i>Events</option>
  </select>
</form>

Checkboxes

Checkboxes are for selecting one or several options in a list.

Disabled checkboxes and radios are supported, but to provide a not-allowed cursor on hover of the parent <label>, you’ll need to add the disabled attribute to the .form-check-input. The disabled attribute will apply a lighter color to help indicate the input’s state.

Apply basic styling by providing form-check-input class.

Default (stacked)

<form>
  <div class="form-check">
    <input class="form-check-input" id="checkbox-1" type="checkbox" value="value1">
    <label for="checkbox-1">Checkbox</label>
  </div>
  <div class="form-check">
    <input class="form-check-input form-check-input--secondary" id="checkbox-4" type="checkbox" value="value4" disabled>
    <label for="checkbox-4">Checkbox disabled</label>
  </div>
</form>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check--inline to any .form-check.

  <form>
    <div class="form-check form-check--inline">
      <input class="form-check-input" id="icheckbox-1" type="checkbox" value="value1">
      <label for="icheckbox-1">Checkbox</label>
    </div>
    <div class="form-check form-check--inline">
      <input class="form-check-input form-check-input--secondary" id="icheckbox-4" type="checkbox" value="value4" disabled>
      <label for="icheckbox-4">Checkbox disabled</label>
    </div>
  </form>

Radios

Radios are for selecting one option from many.

  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label for="exampleRadios1">
        Default radio
    </label>
  </div>

Inline

Group radios on the same horizontal row by adding .form-check--inline to any .form-check.

<form>
  <div class="form-check form-check--inline">
    <input class="form-check-input" type="radio" name="exampleRadios" id="iexampleRadios1" value="option1" checked>
    <label for="iexampleRadios1">
      Default radio
    </label>
  </div>
  <div class="form-check form-check--inline">
    <input class="form-check-input" type="radio" name="exampleRadios" id="iexampleRadios2" value="option2">
    <label for="iexampleRadios2">
      Second default radio
    </label>
  </div>
</form>

Buttons and use of flex-gap--* classes

When a button or a set of buttons needs to be placed at the end of the form, use some of the flex-gap--* classes. Mostly the flex-gap--right class is being used. To read more, check out the Flexbox section.

English Czech 
    <form class="elastic-grid--vertical">
      <div class="form-group">
        <label for="custom-id">Date not available for festival:</label>
        <input type="text" id="custom-id">
      </div>
      <div class="form-group">
        <label for="country">Spoken language:</label>
        <div class="flex-wrap">
          <select id="country">
            <option value="" selected disabled hidden>Select</option>
            <option>Czech Republic</option>
            <option>Norway</option>
            <option>Poland</option>
          </select>
          <div>
            <span class="tag">English <a href=#><i class="fal fa-search"></i></a></span>
            <span class="tag">Czech <a href=#><i class="fal fa-search"></i></a></span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="custom-id">Email address:</label>
        <input type="text" id="email-address">
      </div>
      <div class="form-group flex-gap--right">
        <button type="button" class="btn btn--secondary-outline">Cancel</button>
        <button type="button" class="btn btn--primary">Send Email</button>
      </div>
    </form>

Modals have a special style for showing buttons at their end. And since the submit action triggers an ajax POST request, they are placed outside of the form / .form-group structure.