Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Form

v0.0.0

Form elements styled according to Teva VIsion design.

Three variations are available:

  • The default, in primary color. (.vi-form without any modifiers)
  • Modifier .vi-form--accent displays fields in accent color.
  • Modifier .vi-form--outline displays select fields in outlined accent color.

On required fields the use of (required) is preferred over an asterisk *. When using an asterisk, always add a note like 'Required fields are marked *'

Detailed documentation about form validation can be found here.

Textual input elements #

<!-- Form  -->
<form action="#form-1c8306" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-792801">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-792801" name="name-00b490" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-0d7190">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-0d7190" name="name-615457" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-56d718">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-describedby="help-dc2b11" aria-required="true" class="form-control" disabled id="control-56d718" name="name-b86608" placeholder="Your Website" required type="url">
    <div id="help-dc2b11" class="vi-form__feedback vi-form__feedback--hint">This field is disabled</div>
  </div>
  <div class="form-group">
    <label for="control-1d3d08">Your Message
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <textarea aria-required="true" class="form-control" id="control-1d3d08" name="name-076830" placeholder="Your Message" required></textarea>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Send Message</button>
</form>

Using modifier .vi-form--accent.

<!-- Form (mods: --accent) -->
<form action="#form-c51e58" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-9e60bc">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-9e60bc" name="name-116c64" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-4a0cb3">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-4a0cb3" name="name-8cc0a1" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-72a73b">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-describedby="help-6b3e2e" aria-required="true" class="form-control" disabled id="control-72a73b" name="name-aa0819" placeholder="Your Website" required type="url">
    <div id="help-6b3e2e" class="vi-form__feedback vi-form__feedback--hint">This field is disabled</div>
  </div>
  <div class="form-group">
    <label for="control-1d3c3d">Your Message
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <textarea aria-required="true" class="form-control" id="control-1d3c3d" name="name-4e1243" placeholder="Your Message" required></textarea>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Send Message</button>
</form>

Using modifier .vi-form--inversed in combination with .vi-typesystem--inversed.

<!-- Form (mods: --inversed) -->
<form action="#form-b3cb85" autocomplete="off" class="vi-form vi-form--inversed vi-typesystem vi-typesystem--inversed" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-c239b8">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-c239b8" name="name-44b565" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-14c8ba">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-14c8ba" name="name-eb5983" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-b8e1e9">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-describedby="help-e41009" aria-required="true" class="form-control" disabled id="control-b8e1e9" name="name-1b5146" placeholder="Your Website" required type="url">
    <div id="help-e41009" class="vi-form__feedback vi-form__feedback--hint">This field is disabled</div>
  </div>
  <div class="form-group">
    <label for="control-074ac3">Your Message
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <textarea aria-required="true" class="form-control" id="control-074ac3" name="name-4aed81" placeholder="Your Message" required></textarea>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Send Message</button>
</form>

Sizing #

As per bootstrap documentation use .form-control-sm for small sized text input.

<!-- Form  -->
<form action="#form-6358e6" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-516ce0">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control-sm form-control" id="control-516ce0" name="name-428615" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-b09e55">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control-sm form-control" id="control-b09e55" name="name-011d20" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-ed93e1">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control-sm form-control" id="control-ed93e1" name="name-7dce61" placeholder="Your Website" required type="url">
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Send Message</button>
</form>

Checkboxes and radios #

<!-- Form  -->
<form action="#form-8c534a" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-61c311" name="name-e18ad5" required type="checkbox">
      <label class="custom-control-label" for="control-61c311">
        Helvetica vegan cleanse.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-298b88" name="name-02b74d" required type="checkbox">
      <label class="custom-control-label" for="control-298b88">
        Letterpress crucifix locavore.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-d875c1" name="name-937b41" required type="checkbox">
      <label class="custom-control-label" for="control-d875c1">
        Brooklyn church-key shoreditch.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-cd7779" name="name-33a631" required type="checkbox">
      <label class="custom-control-label" for="control-cd7779">
        Flexitarian hashtag brunch.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-switch custom-control">
      <input aria-required="true" class="custom-control-input" id="control-21e012" name="name-c1212e" required type="checkbox">
      <label class="custom-control-label" for="control-21e012">
        Ethical cleanse wayfarers.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-30258d" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-30258d">
        Pbr&amp;b freegan quinoa.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-813d1c" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-813d1c">
        Yuccie freegan yolo.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-1746bb" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-1746bb">
        Roof normcore pinterest.
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Forage biodiesel</button>
</form>

Using modifier .vi-form--accent.

<!-- Form (mods: --accent) -->
<form action="#form-cd060a" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-836d2d" name="name-e1c270" required type="checkbox">
      <label class="custom-control-label" for="control-836d2d">
        Typewriter vinegar brooklyn.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-72cb33" name="name-cd720d" required type="checkbox">
      <label class="custom-control-label" for="control-72cb33">
        Microdosing lo-fi brunch.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-441e02" name="name-b90085" required type="checkbox">
      <label class="custom-control-label" for="control-441e02">
        Keytar lomo ramps.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-d2e355" name="name-34edbb" required type="checkbox">
      <label class="custom-control-label" for="control-d2e355">
        Shoreditch distillery blog.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-switch custom-control">
      <input aria-required="true" class="custom-control-input" id="control-22d7bb" name="name-1196ca" required type="checkbox">
      <label class="custom-control-label" for="control-22d7bb">
        Selfies church-key swag.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-a771c4" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-a771c4">
        Gentrify kogi iphone.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-6566d8" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-6566d8">
        8-bit phlogiston selfies.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-920c67" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-920c67">
        Swag distillery kinfolk.
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">8-bit celiac</button>
</form>

Select fields #

<!-- Form  -->
<form action="#form-9a4899" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-b70864">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-b70864" name="name-769ca7" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <div class="form-group">
    <label for="control-e60754">Results per page</label>
    <select class="custom-select" disabled id="control-e60754" name="name-733c50">
      <option disabled hidden="hidden" selected value="">20 results per page
      </option>
      <option value="10-results-per-page">10 results per page</option>
      <option value="20-results-per-page">20 results per page</option>
      <option value="30-results-per-page">30 results per page</option>
      <option value="40-results-per-page">40 results per page</option>
      <option value="50-results-per-page">50 results per page</option>
    </select>
  </div>
  <div class="form-group">
    <select aria-required="true" class="custom-select-sm custom-select" id="control-d37220" name="name-c9ade2" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <div class="form-group">
    <select aria-required="true" class="custom-select-lg custom-select" id="control-6ac460" name="name-226315" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Submit your choices</button>
</form>

Using modifier .vi-form--accent.

<!-- Form (mods: --accent) -->
<form action="#form-e920ab" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-cb252b">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-cb252b" name="name-531c73" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <div class="form-group">
    <label for="control-cc6726">Results per page</label>
    <select class="custom-select" disabled id="control-cc6726" name="name-46c3c7">
      <option disabled hidden="hidden" selected value="">20 results per page
      </option>
      <option value="10-results-per-page">10 results per page</option>
      <option value="20-results-per-page">20 results per page</option>
      <option value="30-results-per-page">30 results per page</option>
      <option value="40-results-per-page">40 results per page</option>
      <option value="50-results-per-page">50 results per page</option>
    </select>
  </div>
  <div class="form-group">
    <select aria-required="true" class="custom-select-sm custom-select" id="control-b334ba" name="name-6addda" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <div class="form-group">
    <select aria-required="true" class="custom-select-lg custom-select" id="control-c3206b" name="name-161242" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Submit your choices</button>
</form>

Using modifier .vi-form--outline.

<!-- Form (mods: --outline) -->
<form action="#form-738037" autocomplete="off" class="vi-form vi-form--outline vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-2d3641">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-2d3641" name="name-9b2c39" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <div class="form-group">
    <label for="control-c685dd">Results per page</label>
    <select class="custom-select" disabled id="control-c685dd" name="name-31d8b6">
      <option disabled hidden="hidden" selected value="">20 results per page
      </option>
      <option value="10-results-per-page">10 results per page</option>
      <option value="20-results-per-page">20 results per page</option>
      <option value="30-results-per-page">30 results per page</option>
      <option value="40-results-per-page">40 results per page</option>
      <option value="50-results-per-page">50 results per page</option>
    </select>
  </div>
  <div class="form-group">
    <select aria-required="true" class="custom-select-sm custom-select" id="control-94d8c1" name="name-b723e2" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <div class="form-group">
    <select aria-required="true" class="custom-select-lg custom-select" id="control-1ce375" name="name-52a140" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Submit your choices</button>
</form>

File browser #

To change the button text, use data-browse on the element with class .custom-file-label.

This file field also has attribute multiple for testing purposes.

<!-- Form  -->
<form action="#form-025d74" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <div class="custom-file">
      <input class="custom-file-input" id="control-b6bb11" name="name-85913b" type="file">
      <label class="custom-file-label" data-browse="Find files" for="control-b6bb11">
        Please select a file
      </label>
    </div>
  </div>
  <p class="text-muted small mb-10">This file field also has attribute <code>multiple</code> for testing purposes.</p>
  <div class="form-group">
    <div class="custom-file">
      <input class="custom-file-input" id="control-4c55a2" multiple name="name-0c30a8" type="file">
      <label class="custom-file-label" for="control-4c55a2">
        Please select multiple files
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Beard normcore</button>
</form>

Using modifier .vi-form--accent.

Note the data-msg-success message to set the success message.

This file field also has attribute multiple for testing purposes.

<!-- Form (mods: --accent) -->
<form action="#form-d2183a" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <div class="custom-file">
      <input class="custom-file-input" data-msg-success="%files% choosen" id="control-962dc1" name="name-38477b" type="file">
      <label class="custom-file-label" data-browse="Find files" for="control-962dc1">
        Please select a file
      </label>
    </div>
  </div>
  <p class="text-muted small mb-10">This file field also has attribute <code>multiple</code> for testing purposes.</p>
  <div class="form-group">
    <div class="custom-file">
      <input class="custom-file-input" data-msg-success="%files% choosen" id="control-a22de9" multiple name="name-171bbb" type="file">
      <label class="custom-file-label" for="control-a22de9">
        Please select multiple files
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Goth carry</button>
</form>

Miscellaneous #

Example of checkbox with really long label text.

To align the control to the top use modifier ...--top on .custom-control

<!-- Form  -->
<form action="#to-the-server" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="sg-0e8a25" novalidate>
  <div class="form-group" id="sg-d659ae">
    <div class="custom-checkbox custom-control custom-control--top">
      <input class="custom-control-input" id="control-8a7da1" name="name-e542cb" type="checkbox">
      <label class="custom-control-label" for="control-8a7da1">
        Asymmetrical mumblecore echo pitchfork taxidermy. Kitsch aesthetic intelligentsia literally drinking pabst austin thundercats. Meh cred ramps skateboard vegan cold-pressed hella. Swag pop-up put a bird on it intelligentsia ethical 90's hoodie kinfolk. Shabby chic seitan bicycle rights typewriter quinoa. Wolf cardigan fashion axe vinegar hashtag. Normcore gastropub leggings chartreuse hammock intelligentsia sriracha. Gastropub roof raw denim. Carry kombucha dreamcatcher truffaut. Plaid distillery iphone mlkshk stumptown before they sold out ramps offal. Tote bag ennui jean shorts.
        Don't you agree?
      </label>
    </div>
  </div>
  <div class="form-group" id="sg-d659ae">
    <div class="custom-switch custom-control custom-control--top">
      <input class="custom-control-input" id="control-9e856e" name="name-b958cc" type="checkbox">
      <label class="custom-control-label" for="control-9e856e">
        Fashion axe yr lo-fi diy mustache viral. Blog pbr&amp;b carry synth yuccie keytar master pork belly. Locavore ennui mlkshk meditation 8-bit disrupt vegan street. Bespoke seitan green juice pour-over. Asymmetrical paleo +1 ugh. Vegan drinking pabst try-hard aesthetic. Narwhal shabby chic normcore ethical leggings roof cardigan twee. Microdosing gluten-free ethical schlitz truffaut jean shorts try-hard readymade. Kitsch master vinegar austin semiotics kinfolk flannel 90's. Chambray ramps kinfolk intelligentsia aesthetic whatever fingerstache cleanse.
        Don't you agree?
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Meditation swag</button>
</form>

The example shows:

  • rich text in description for checkbox and radiobuttons.
  • links in labels (although an UX anti-pattern)

Are you sure? Tacos ennui wes anderson gluten-free. Austin heirloom slow-carb literally post-ironic taxidermy phlogiston hoodie. Phlogiston diy polaroid williamsburg blue bottle beard park twee.

Do you agree? Blog paleo phlogiston chia +1 hella cliche. Taxidermy pitchfork organic occupy forage dreamcatcher. Street helvetica 90's cardigan cred sriracha plaid farm-to-table.

<!-- Form  -->
<form action="#form-882879" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group" role="group" aria-labelledby="label-b0d56c">
    <div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-b0d56c">
      <p>Are you sure? Tacos ennui wes anderson gluten-free. Austin heirloom slow-carb literally post-ironic taxidermy phlogiston hoodie. Phlogiston diy polaroid williamsburg blue bottle beard park twee.</p>
      <span aria-hidden="true" class="vi-form__required">(required)</span>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-describedby="help-29e77b" aria-required="true" class="custom-control-input" id="control-cdcac3" name="name-7aa83d" required type="checkbox">
      <label class="custom-control-label" for="control-cdcac3">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div id="help-29e77b" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
    <div class="custom-switch custom-control">
      <input aria-describedby="help-48c475" aria-required="true" class="custom-control-input" id="control-e6139e" name="name-4ed14b" required type="checkbox">
      <label class="custom-control-label" for="control-e6139e">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div id="help-48c475" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
  <div class="form-group" role="group" aria-labelledby="label-198949" aria-describedby="help-a8007c">
    <div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-198949">
      <p>Do you agree? Blog paleo phlogiston chia +1 hella cliche. Taxidermy pitchfork organic occupy forage dreamcatcher. Street helvetica 90's cardigan cred sriracha plaid farm-to-table.</p>
      <span aria-hidden="true" class="vi-form__required">(required)</span>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-d4c2d3" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-d4c2d3">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-85ea42" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-85ea42">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-8617de" name="name-d59aac" required type="radio">
      <label class="custom-control-label" for="control-8617de">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div id="help-a8007c" class="vi-form__feedback vi-form__feedback--hint">You have to agree with something.</div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Fixie pinterest</button>
</form>

The example shows:

  • A checkbox with label, followed by a paragraph that contains a link.

This is the paragraph near the checkbox. The paragraph contains a Hyperlink, as you can see. 

<!-- Form  -->
<form action="#form-dd94b1" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group" role="group" aria-labelledby="label-0c7dd3">
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-c4d1b5" name="name-617303" required type="checkbox">
      <label class="custom-control-label" for="control-c4d1b5">
        This is the label of the checkbox
      </label>
    </div>
    <div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-0c7dd3">
      <p>
        This is the paragraph near the checkbox. The paragraph contains a
        <a href="#">Hyperlink</a>,
        as you can see.
      </p>
      <span aria-hidden="true" class="vi-form__required">(required)</span>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Bushwick hella</button>
</form>

Example of checkboxes with one error message at the bottom of all checkboxes.

<!-- Form  -->
<form action="#to-the-server" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="sg-cc4602" novalidate>
  <div class="form-group" id="sg-31a94e">
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-0595d2" name="name-59bd1d" type="checkbox">
      <label class="custom-control-label" for="control-0595d2">
        Marfa tilde salvia.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-393e17" name="name-e69405" type="checkbox">
      <label class="custom-control-label" for="control-393e17">
        Meditation sustainable keffiyeh.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-685b85" name="name-a61a93" type="checkbox">
      <label class="custom-control-label" for="control-685b85">
        Organic locavore typewriter.
      </label>
    </div>
    <div class="custom-checkbox custom-control" id="sg-d86e3b">
      <input class="custom-control-input" id="control-dd132b" name="name-27753c" type="checkbox">
      <label class="custom-control-label" for="control-dd132b">
        Neutra vhs pour-over.
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Keffiyeh pop-up</button>
</form>

Example of search filter checkboxes.

<!-- Form (mods: --accent) -->
<form action="#form-e2e1cb" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-a64b2c" name="name-cbe874" type="checkbox">
      <label class="custom-control-label" for="control-a64b2c">
        Fingerstache irony 90's.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-bd615a" name="name-0d8ab6" type="checkbox">
      <label class="custom-control-label" for="control-bd615a">
        8-bit umami cornhole.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-10cb34" name="name-0d330d" type="checkbox">
      <label class="custom-control-label" for="control-10cb34">
        Etsy hammock master.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-b93028" name="name-921b27" type="checkbox">
      <label class="custom-control-label" for="control-b93028">
        Typewriter carry fingerstache.
      </label>
    </div>
  </div>
</form>

Example of newsletter subscription form.

<!-- Form  -->
<form action="#form-7c813b" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="mb-30 form-group">
    <label class="sr-only" for="control-6658cc">Your Email Address</label>
    <input aria-required="true" class="form-control" data-msg-success="Looks like an email address." data-msg="Please provide a valid email address." id="control-6658cc" name="name-a2839d" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Subscribe</button>
</form>

Example of HCP Filter.

<!-- Form (mods: --outline) -->
<form action="#form-8b2ada" autocomplete="off" class="vi-form vi-form--outline vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label class="vi-type vi-type--text-big" for="control-794528">I am a</label>
    <div class="form-row">
      <div class="col-auto col-md-7 col-lg-5">
        <select aria-required="true" class="custom-select" id="control-794528" name="name-35577a" required>
          <option disabled hidden="hidden" selected value="">Select
          </option>
          <option value="pharmacist">pharmacist</option>
          <option value="pharmacy-technician">pharmacy technician</option>
          <option value="physician">physician</option>
        </select>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="vi-type vi-type--text-big" for="control-a3e777">looking for</label>
    <div class="form-row">
      <div class="col-auto col-md-7 col-lg-5">
        <select aria-required="true" class="custom-select" id="control-a3e777" name="name-9b9c19" required>
          <option disabled hidden="hidden" selected value="">Select
          </option>
          <option value="professional-support">professional support</option>
          <option value="pharmacy-tools-and-resources">pharmacy tools and resources</option>
          <option value="continuing-education">continuing education</option>
          <option value="resources-for-patients-and-caregivers">resources for patients and caregivers</option>
          <option value="information-about-generic-medicines">information about generic medicines</option>
        </select>
      </div>
    </div>
  </div>
  <div class="mt-20">
    <!-- Button type: solid  -->
    <button type="submit" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid--lg vi-btn">Go</button>
  </div>
</form>

Select Field with Label and Required text.

<!-- Form  -->
<form action="#form-8c4798" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-8bb64e">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-8bb64e" name="name-13a66b" required>
      <option disabled hidden="hidden" selected value="">Sort order
      </option>
      <option value="asc">Asc</option>
      <option value="desc">Desc</option>
    </select>
  </div>
</form>

Example login form. This form uses the grid.

I forgot my password 

<!-- Form  -->
<form action="#form-726784" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="mb-30">
    <div class="form-group">
      <label for="control-74d8ea">Email</label>
      <input aria-required="true" class="form-control" data-msg="Please provide a valid email address." id="control-74d8ea" name="name-2c2981" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Email" required type="email">
    </div>
    <div class="form-group">
      <label for="control-5db903">Password</label>
      <input aria-required="true" class="form-control" id="control-5db903" name="name-2442d0" placeholder="Password" required type="password">
    </div>
    <p class="mt-10">
      <a href="#sg-7b5e7e">I forgot my password</a>
    </p>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Log in</button>
</form>

Disabled #

Example login form. This form uses the grid.

<!-- Form  -->
<form action="#form-ae0bda" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-55d266">Disabled text field</label>
    <input class="form-control" disabled id="control-55d266" name="name-e527cd" placeholder="Disabled text field" type="text">
  </div>
  <div class="form-group">
    <label for="control-4b14ac">Disabled text area</label>
    <textarea class="form-control" disabled id="control-4b14ac" name="name-90a220" placeholder="Disabled text area"></textarea>
  </div>
  <div class="form-group">
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" disabled id="control-ecc234" name="name-ec0bc3" type="checkbox">
      <label class="custom-control-label" for="control-ecc234">
        Disabled checkbox
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-switch custom-control">
      <input class="custom-control-input" disabled id="control-4c8ea8" name="name-aa68dc" type="checkbox">
      <label class="custom-control-label" for="control-4c8ea8">
        Disabled checkbox (switch)
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-radio custom-control">
      <input class="custom-control-input" disabled id="control-a69753" name="name-d8c98d" type="radio">
      <label class="custom-control-label" for="control-a69753">
        Disabled radio button
      </label>
    </div>
  </div>
  <div class="form-group">
    <select class="custom-select" disabled id="control-2ba4b0" name="name-79546d">
      <option disabled hidden="hidden" selected value="">Disabled select field
      </option>
      <option value="nope">nope</option>
    </select>
  </div>
  <div class="form-group">
    <div class="custom-file">
      <input class="custom-file-input" disabled id="control-57467e" name="name-9c9591" type="file">
      <label class="custom-file-label" for="control-57467e">
        Please select a file
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" disabled class="vi-btn-solid vi-btn">Disabled button</button>
</form>

Data List #

Native autocomplete with datalist element. The list attribute of the input element points to the id of the datalist.

To only allow entries from the datalist, custom validations can be used.

 
<!-- Form  -->
<form action="#form-d51208" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="sg-62632a">Country
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="sg-62632a" list="countries" name="name-865972" placeholder="Country" required type="text">
    <datalist id="countries">
      <option>Russia</option>
      <option>Germany</option>
      <option>United Kingdom</option>
      <option>France</option>
      <option>Italy</option>
      <option>Spain</option>
      <option>Ukraine</option>
      <option>Poland</option>
      <option>Romania</option>
      <option>Netherlands</option>
      <option>Belgium</option>
      <option>Czech Republic</option>
      <option>Greece</option>
      <option>Portugal</option>
      <option>Sweden</option>
      <option>Hungary</option>
      <option>Belarus</option>
      <option>Austria</option>
      <option>Serbia</option>
      <option>Switzerland</option>
      <option>Bulgaria</option>
      <option>Denmark</option>
      <option>Finland</option>
      <option>Slovakia</option>
      <option>Norway</option>
      <option>Ireland</option>
      <option>Croatia</option>
      <option>Moldova</option>
      <option>Bosnia and Herzegovina</option>
      <option>Albania</option>
      <option>Lithuania</option>
      <option>North Macedonia</option>
      <option>Slovenia</option>
      <option>Latvia</option>
      <option>Estonia</option>
      <option>Montenegro</option>
      <option>Luxembourg</option>
      <option>Malta</option>
      <option>Iceland</option>
      <option>Andorra</option>
      <option>Monaco</option>
      <option>Liechtenstein</option>
      <option>San Marino</option>
      <option>Holy See</option>
    </datalist>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Ugh phlogiston</button>
</form>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 19 Feb 2025 - fix(form): resolve mutation observer recursion issue in Safari
  • 13 Feb 2025 - feat(form): fix form reset validation messages
  • 11 Sep 2024 - Fix broken label issue (webkit only!)
  • 01 Jun 2023 - Fix read-only styling to input, select and textarea. Fixes placeholder combobox.
  • 23 May 2023 - Removed a11y default success message; Business requirement.
  • 28 Apr 2023 - Fix safaris hard disable color override.
  • 15 Feb 2023 - Combobox validation
  • 18 Jan 2023 - Fix background-clip setting.
  • 28 June 2022 - Fix scrollparent detector
  • Make Safari (the new IE6) understand how parenthesis work when direction is rtl.
  • Remove previous work around.
  • Try to work around chrome mobile bug (1197882) where long datalists overlap keyboard.
  • Fix chrome bug (674447, 849616) where datalist gets detached by scrolling.
  • Wrapping of lang filenames in file field.
  • PBS support: fix box-shadow on custom-control
  • Regression: accent colors not picked up by sass.
  • Allow re-enabled fields to validate.
  • Remove file field blur validation.
  • A11y: …show hidden span tag with this value”name of the file + “selected” add role=”alert”
  • A11y: Redundantly add attribute aria-required=true to elements with attribute required
  • A11y: …add a hidden span tag with this value”name of the file + “uploaded” add role=”alert”
  • Form Validation message not showing, when element hidden.
  • IE11 premature error throwing.
  • Better align custom indicators regardless font / line-height used.
  • Remove background color IE11 from focused select.

Changed

  • 09 Jan 2025 - feat(multiple-select): Show options with empty value.
  • 30 Jun 2023 - Disabled state of checkbox/radio and switch.

Added

  • 28 Aug 2024 - Add dynamic form fields example + added $.fn.viFormDynamicFieldsContainer() to assign to a dynamic fields container and keep validation in sync.
  • 17 May 2023 - Form reset removes validation messages.
  • 15 Mar 2023 - Allow browse button text to be changed.
  • 15 Feb 2023 - Combobox reset
  • 2 Dec 2022 - Add size sm size to text-fields.
  • 14 Nov 2022 - Add data attribute data-keyup to allow for keyup validation on a field. (required by wizard#contextual-fields)
  • Add an example of a paragraph
  • An example of labels on select fields.
  • PBS support
  • Examples of contextual form fields.
  • Add --top modifier to .custom-control for long labels.
  • A11y: File field focus outline same as links.
  • On submit focus on first invalid element
  • Missing File Browser field
  • RTL support
  • Documentation
  • Changed checkbox outline according new design input.
  • Initial draft