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

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-b7c628" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-0d24d4">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-0d24d4" name="name-538460" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-4ce80d">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-4ce80d" name="name-905a0d" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-734ea9">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-describedby="help-1e7c6e" aria-required="true" class="form-control" disabled id="control-734ea9" name="name-1360dd" placeholder="Your Website" required type="url">
    <div id="help-1e7c6e" class="vi-form__feedback vi-form__feedback--hint">This field is disabled</div>
  </div>
  <div class="form-group">
    <label for="control-b8689d">Your Message
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <textarea aria-required="true" class="form-control" id="control-b8689d" name="name-90b532" 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-bcaa1b" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-9067b6">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-9067b6" name="name-5ebba3" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-1128e7">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-1128e7" name="name-a6ee6a" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-4a74db">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-describedby="help-97aba1" aria-required="true" class="form-control" disabled id="control-4a74db" name="name-c8a07d" placeholder="Your Website" required type="url">
    <div id="help-97aba1" class="vi-form__feedback vi-form__feedback--hint">This field is disabled</div>
  </div>
  <div class="form-group">
    <label for="control-0bddc5">Your Message
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <textarea aria-required="true" class="form-control" id="control-0bddc5" name="name-62c358" 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-4c0090" autocomplete="off" class="vi-form vi-form--inversed vi-typesystem vi-typesystem--inversed" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-310a60">Your Name
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-310a60" name="name-3e373b" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-9384ad">Your Email Address
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="control-9384ad" name="name-dce4bc" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-279809">Your Website
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-describedby="help-44cc4e" aria-required="true" class="form-control" disabled id="control-279809" name="name-8341db" placeholder="Your Website" required type="url">
    <div id="help-44cc4e" class="vi-form__feedback vi-form__feedback--hint">This field is disabled</div>
  </div>
  <div class="form-group">
    <label for="control-d24888">Your Message
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <textarea aria-required="true" class="form-control" id="control-d24888" name="name-5dbe6e" 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-d76bad" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-d87e09">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-d87e09" name="name-b9e900" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-7d99e7">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-7d99e7" name="name-59eb63" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-7b9860">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-7b9860" name="name-28e8a1" 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-d37cb5" 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-3cb222" name="name-c123a1" required type="checkbox">
      <label class="custom-control-label" for="control-3cb222">
        Whatever mixtape irony.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-c7d049" name="name-e1056a" required type="checkbox">
      <label class="custom-control-label" for="control-c7d049">
        Sustainable biodiesel celiac.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-dbb6ba" name="name-0b81ab" required type="checkbox">
      <label class="custom-control-label" for="control-dbb6ba">
        Aesthetic austin keffiyeh.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-dc7727" name="name-dea464" required type="checkbox">
      <label class="custom-control-label" for="control-dc7727">
        Distillery paleo knausgaard.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-switch custom-control">
      <input aria-required="true" class="custom-control-input" id="control-47e189" name="name-65a6db" required type="checkbox">
      <label class="custom-control-label" for="control-47e189">
        Franzen pop-up swag.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-85848b" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-85848b">
        Migas authentic hoodie.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-4687a0" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-4687a0">
        Blog selvage yolo.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-5db32d" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-5db32d">
        Squid beard kinfolk.
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Yr hashtag</button>
</form>

Using modifier .vi-form--accent.

<!-- Form (mods: --accent) -->
<form action="#form-9e2dc4" 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-579520" name="name-ee5e6d" required type="checkbox">
      <label class="custom-control-label" for="control-579520">
        +1 waistcoat drinking.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-8dcca2" name="name-761812" required type="checkbox">
      <label class="custom-control-label" for="control-8dcca2">
        Tousled schlitz try-hard.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-c97e79" name="name-51d895" required type="checkbox">
      <label class="custom-control-label" for="control-c97e79">
        Marfa cardigan wayfarers.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-e5cd9d" name="name-e47e1d" required type="checkbox">
      <label class="custom-control-label" for="control-e5cd9d">
        Mumblecore try-hard portland.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-switch custom-control">
      <input aria-required="true" class="custom-control-input" id="control-0a2114" name="name-d5c7a8" required type="checkbox">
      <label class="custom-control-label" for="control-0a2114">
        +1 intelligentsia church-key.
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-db45b1" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-db45b1">
        Chambray park farm-to-table.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-ac812b" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-ac812b">
        Yr poutine tofu.
      </label>
    </div>
    <div class="custom-radio custom-control">
      <input aria-required="true" class="custom-control-input" id="control-716104" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-716104">
        Listicle retro mixtape.
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Flannel slow-carb</button>
</form>

Select fields #

<!-- Form  -->
<form action="#form-b1eb61" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-59e338">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-59e338" name="name-a37958" 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-ad3041">Results per page</label>
    <select class="custom-select" disabled id="control-ad3041" name="name-7d20ea">
      <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-d39136" name="name-46ba8b" 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-ae0cb7" name="name-76a02b" 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-e12e7c" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-74b072">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-74b072" name="name-b9ab7d" 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-c5e311">Results per page</label>
    <select class="custom-select" disabled id="control-c5e311" name="name-436985">
      <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-8ccbd1" name="name-7c3ced" 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-9d9bc5" name="name-76e039" 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-532b74" autocomplete="off" class="vi-form vi-form--outline vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-8508d3">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-8508d3" name="name-01e7d9" 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-91ca00">Results per page</label>
    <select class="custom-select" disabled id="control-91ca00" name="name-da2501">
      <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-08b718" name="name-cdd688" 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-8756e4" name="name-11d3dc" 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-23e2d1" 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-b57ca8" name="name-4d1ea1" type="file">
      <label class="custom-file-label" data-browse="Find files" for="control-b57ca8">
        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-392d44" multiple name="name-1edd5d" type="file">
      <label class="custom-file-label" for="control-392d44">
        Please select multiple files
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Listicle iphone</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-a8b575" 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-33a9ba" name="name-8eda6e" type="file">
      <label class="custom-file-label" data-browse="Find files" for="control-33a9ba">
        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-bd204a" multiple name="name-41b123" type="file">
      <label class="custom-file-label" for="control-bd204a">
        Please select multiple files
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Echo 90's</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-541158" novalidate>
  <div class="form-group" id="sg-4cbc4b">
    <div class="custom-checkbox custom-control custom-control--top">
      <input class="custom-control-input" id="control-24c653" name="name-911ce2" type="checkbox">
      <label class="custom-control-label" for="control-24c653">
        Roof godard vinyl. Master keytar green juice mustache godard hammock brooklyn swag. Heirloom etsy chicharrones thundercats poutine schlitz offal. Tote bag cleanse selvage humblebrag heirloom intelligentsia phlogiston. Cardigan godard freegan pitchfork. Intelligentsia dreamcatcher cardigan phlogiston farm-to-table. Roof vice retro meditation kogi. Sartorial squid heirloom everyday health flexitarian. Single-origin coffee stumptown letterpress scenester hammock diy occupy organic. Distillery art party selvage schlitz. Stumptown shabby chic mustache put a bird on it selvage gentrify. +1 bicycle rights thundercats kitsch narwhal tumblr.
        Don't you agree?
      </label>
    </div>
  </div>
  <div class="form-group" id="sg-4cbc4b">
    <div class="custom-switch custom-control custom-control--top">
      <input class="custom-control-input" id="control-e06204" name="name-49abb1" type="checkbox">
      <label class="custom-control-label" for="control-e06204">
        Banh mi neutra twee polaroid yr 3 wolf moon tilde readymade. Muggle magic ugh organic loko park kombucha. Everyday wes anderson swag banjo blog fixie. Photo booth authentic slow-carb 8-bit. Diy selvage bitters tousled. Helvetica you probably haven't heard of them flexitarian taxidermy iphone ethical umami tattooed. Pbr&amp;b messenger bag mlkshk. Single-origin coffee post-ironic beard meggings. Fashion axe beard ramps salvia etsy cardigan iphone pork belly. Kombucha godard master thundercats mlkshk. You probably haven't heard of them ethical echo butcher knausgaard.
        Don't you agree?
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Goth taxidermy</button>
</form>

The example shows:

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

Are you sure? Venmo taxidermy before they sold out. Brunch cardigan umami photo booth. Fixie bespoke seitan salvia.

Do you agree? Single-origin coffee iphone disrupt bicycle rights wayfarers meggings. Hoodie vinyl tote bag shoreditch vice kitsch wes anderson. Pbr&b tofu schlitz gastropub church-key tilde try-hard intelligentsia. Gastropub heirloom put a bird on it pork belly. Goth pbr&b umami polaroid art party park.

<!-- Form  -->
<form action="#form-de4473" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group" role="group" aria-labelledby="label-756600">
    <div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-756600">
      <p>Are you sure? Venmo taxidermy before they sold out. Brunch cardigan umami photo booth. Fixie bespoke seitan salvia.</p>
      <span aria-hidden="true" class="vi-form__required">(required)</span>
    </div>
    <div class="custom-checkbox custom-control">
      <input aria-describedby="help-a25d54" aria-required="true" class="custom-control-input" id="control-25379b" name="name-77464b" required type="checkbox">
      <label class="custom-control-label" for="control-25379b">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div id="help-a25d54" 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-620417" aria-required="true" class="custom-control-input" id="control-55e01c" name="name-1beb25" required type="checkbox">
      <label class="custom-control-label" for="control-55e01c">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div id="help-620417" 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-1791d7" aria-describedby="help-301289">
    <div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-1791d7">
      <p>Do you agree? Single-origin coffee iphone disrupt bicycle rights wayfarers meggings. Hoodie vinyl tote bag shoreditch vice kitsch wes anderson. Pbr&amp;b tofu schlitz gastropub church-key tilde try-hard intelligentsia. Gastropub heirloom put a bird on it pork belly. Goth pbr&amp;b umami polaroid art party park.</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-40ee1e" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-40ee1e">
        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-4dd2b3" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-4dd2b3">
        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-876557" name="name-6ec2ec" required type="radio">
      <label class="custom-control-label" for="control-876557">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
    <div id="help-301289" 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">Aesthetic carry</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-bd1038" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group" role="group" aria-labelledby="label-6b448e">
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-e8a4bc" name="name-43d391" required type="checkbox">
      <label class="custom-control-label" for="control-e8a4bc">
        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-6b448e">
      <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">Vice try-hard</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-3505ab" novalidate>
  <div class="form-group" id="sg-8c0b08">
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-ea37dd" name="name-928419" type="checkbox">
      <label class="custom-control-label" for="control-ea37dd">
        Cleanse wolf yr.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-2d1171" name="name-c65256" type="checkbox">
      <label class="custom-control-label" for="control-2d1171">
        Chillwave ethical polaroid.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-636605" name="name-938d88" type="checkbox">
      <label class="custom-control-label" for="control-636605">
        Lo-fi pickled asymmetrical.
      </label>
    </div>
    <div class="custom-checkbox custom-control" id="sg-b906a8">
      <input class="custom-control-input" id="control-430683" name="name-1a96d6" type="checkbox">
      <label class="custom-control-label" for="control-430683">
        Cleanse selfies yuccie.
      </label>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Try-hard leggings</button>
</form>

Example of search filter checkboxes.

<!-- Form (mods: --accent) -->
<form action="#form-b55aa7" 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-39d967" name="name-b516d0" type="checkbox">
      <label class="custom-control-label" for="control-39d967">
        Leggings marfa wayfarers.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-c91d07" name="name-d2541b" type="checkbox">
      <label class="custom-control-label" for="control-c91d07">
        Gentrify mlkshk sartorial.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-2d52b8" name="name-744882" type="checkbox">
      <label class="custom-control-label" for="control-2d52b8">
        Disrupt godard whatever.
      </label>
    </div>
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" id="control-836334" name="name-578c89" type="checkbox">
      <label class="custom-control-label" for="control-836334">
        Keffiyeh phlogiston whatever.
      </label>
    </div>
  </div>
</form>

Example of newsletter subscription form.

<!-- Form  -->
<form action="#form-2ad2db" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="mb-30 form-group">
    <label class="sr-only" for="control-75486a">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-75486a" name="name-a86909" 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-22e408" 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-c7974e">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-c7974e" name="name-1a3464" 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-b5b128">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-b5b128" name="name-9ab809" 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-ae04c6" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-aa1e0e">Sort order
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <select aria-required="true" class="custom-select" id="control-aa1e0e" name="name-be76cc" 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-05c5ea" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="mb-30">
    <div class="form-group">
      <label for="control-3d6c85">Email</label>
      <input aria-required="true" class="form-control" data-msg="Please provide a valid email address." id="control-3d6c85" name="name-9e5829" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Email" required type="email">
    </div>
    <div class="form-group">
      <label for="control-235b08">Password</label>
      <input aria-required="true" class="form-control" id="control-235b08" name="name-b8ae08" placeholder="Password" required type="password">
    </div>
    <p class="mt-10">
      <a href="#sg-dbb45d">I forgot my password</a>
    </p>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Log in</button>
</form>

Disabled #

Example login form. This form uses the grid.

<!-- Form  -->
<form action="#form-648b48" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-1c08b7">Disabled text field</label>
    <input class="form-control" disabled id="control-1c08b7" name="name-50a7e9" placeholder="Disabled text field" type="text">
  </div>
  <div class="form-group">
    <label for="control-5c539b">Disabled text area</label>
    <textarea class="form-control" disabled id="control-5c539b" name="name-e82823" placeholder="Disabled text area"></textarea>
  </div>
  <div class="form-group">
    <div class="custom-checkbox custom-control">
      <input class="custom-control-input" disabled id="control-397e84" name="name-d580d4" type="checkbox">
      <label class="custom-control-label" for="control-397e84">
        Disabled checkbox
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-switch custom-control">
      <input class="custom-control-input" disabled id="control-94e43d" name="name-e99e42" type="checkbox">
      <label class="custom-control-label" for="control-94e43d">
        Disabled checkbox (switch)
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-radio custom-control">
      <input class="custom-control-input" disabled id="control-34d281" name="name-343198" type="radio">
      <label class="custom-control-label" for="control-34d281">
        Disabled radio button
      </label>
    </div>
  </div>
  <div class="form-group">
    <select class="custom-select" disabled id="control-b53751" name="name-3b04a9">
      <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-95e207" name="name-a49dc2" type="file">
      <label class="custom-file-label" for="control-95e207">
        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-781d05" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="sg-50c96c">Country
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <input aria-required="true" class="form-control" id="sg-50c96c" list="countries" name="name-2c6ace" 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">8-bit offal</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