Mirage: BGA styles

6.5 forms.form-item Form item

Toggle example guides Toggle HTML markup

Wrapper for a form element (or group of form elements) and its label.

Examples
Default styling
Form item description.
Another form item description.
.form-item--inline
Inline form items.
Form item description.
Another form item description.
.form-item--tight
Packs groups of form items closer together.
Form item description.
Another form item description.
.is-error
Highlight the form elements that caused a form submission error.
Form item description.
Another form item description.
Markup: forms/form-item/form-item.twig 
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"form-item-input"</span>&gt;</span>Label <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__required"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"This field is required."</span>&gt;</span>*<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__widget"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"form-item-input"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Text value"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__description"</span>&gt;</span>
    Form item description.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"form-item-input-2"</span>&gt;</span>Another label <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__required"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"This field is required."</span>&gt;</span>*<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__widget"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"form-item-input-2"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Text value"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-item__description"</span>&gt;</span>
    Another form item description.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span>
Source: forms/form-item/_form-item.scss, line 4