2.15 #Components.form Form Control

Toggle example guides Toggle HTML markup

The form control component. A container for form elements that helps position icons and validation messages.

JavaScript is required for adding/removing validation classes.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
.sb-form-control--invalid
invalid input
Markup 
<div class="sb-form-control [modifier class]">
  <label class="sb-label" for="text-form-input-id-[modifier class]">Input Label</label>
  <div class="sb-form-control__input">
    <input class="sb-input" type="text" id="text-form-input-id-[modifier class]" placeholder="Placeholder Text">
  </div>
  <p role="alert" class="sb-form-control__validation">Error message here.</p>
</div>
Source: components/_form-control.scss, line 1