GNWT Base Theme Style Guide

6 forms Forms

Form components are specialized design components that are applied to forms or form elements.

Source: sass/gnwt-core.scss, line 77

6.1 forms.base Form defaults

These are the default base styles applied to HTML form elements.

Component classes can override these styles, but if no class applies a style to an HTML form element, these styles will be the ones displayed.

Source: sass/base/forms/_forms.scss, line 3

6.1.1 forms.base.button Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Buttons built with the <button> element are the most flexible for styling purposes. But <input> elements with type set to submit, image, reset, or button are also supported.

Below is the default button styling. To see variations on the button styling see the button component.

Examples
Default styling

:hover
Hover styling.

:active:hover
Depressed button styling.

Markup: base/forms/forms-button.twig 
<p>
  <button type="button" class="{{modifier_class}}">Standard button</button>
  <button type="button" class="{{modifier_class}}" disabled>disabled button</button>
</p>
<p>
  <button type="submit" class="{{modifier_class}}">Submit button</button>
  <button type="submit" class="{{modifier_class}}" disabled>Disabled submit button</button>
</p>
<p>
  <button type="reset" class="{{modifier_class}}">Reset button</button>
  <button type="reset" class="{{modifier_class}}" disabled>Disabled reset button</button>
</p>
<p>
  <input type="button" class="{{modifier_class}}" value="Input button">
  <input type="button" class="{{modifier_class}}" value="Disabled input button" disabled>
</p>
<p>
  <input type="submit" class="{{modifier_class}}" value="Input submit button">
  <input type="submit" class="{{modifier_class}}" value="Disabled input submit button" disabled>
</p>
<p>
  <input type="reset" class="{{modifier_class}}" value="Input reset button">
  <input type="reset" class="{{modifier_class}}" value="Disabled input reset button" disabled>
</p>
Source: sass/base/forms/_forms.scss, line 92

6.1.2 forms.base.fieldset Fieldsets

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <fieldset> element groups a set of form fields, optionally under a common name given by the <legend> element.

Example
A fieldset
A disabled fieldset
Markup: base/forms/forms-fieldset.twig 
<fieldset class="{{modifier_class}}">
  <legend>A fieldset</legend>
  <label for="fieldsetText">Text input</label>
  <input type="text" id="fieldsetText" placeholder="Text input">
</fieldset>

<fieldset class="{{modifier_class}}" disabled>
  <legend>A disabled fieldset</legend>
  <div>
    <label for="fieldsetText2">Disabled text input</label>
    <input type="text" id="fieldsetText2" placeholder="Disabled input">
  </div>
  <div>
    <label for="fieldsetSelect">Disabled select menu</label>
    <select id="fieldsetSelect">
      <option>Disabled select</option>
    </select>
  </div>
  <div>
    <label><input type="checkbox"> Can't check this</label>
  </div>
</fieldset>
Source: sass/base/forms/_forms.scss, line 207

6.1.3 forms.base.input Inputs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <input> element is mostly used for text-based inputs that include the HTML5 types: text, search, tel, url, email, password, date, time, number, range, color, and file.

Example
Markup: base/forms/forms-input.twig 
<div>
  <label for="inputText">Text</label>
  <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
</div>
<div>
  <label for="inputSearch">Search</label>
  <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
</div>
<div>
  <label for="inputTel">Telephone</label>
  <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
</div>
<div>
  <label for="inputURL">URL</label>
  <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
</div>
<div>
  <label for="inputEmail">Email address</label>
  <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
</div>
<div>
  <label for="inputPassword">Password</label>
  <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
</div>
<div>
  <label for="inputDate">Date</label>
  <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
</div>
<div>
  <label for="inputTime">Time</label>
  <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
</div>
<div>
  <label for="inputNumber">Number</label>
  <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
</div>
<div>
  <label for="inputRange">Range</label>
  <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
</div>
<div>
  <label for="inputColor">Color</label>
  <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
</div>
<div>
  <label for="inputFile">File input</label>
  <input type="file" class="{{modifier_class}}" id="inputFile">
</div>

<div>
  <label for="inputText">Disabled text</label>
  <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
  <label for="inputSearch">Disabled search</label>
  <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
  <label for="inputTel">Disabled telephone</label>
  <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
  <label for="inputURL">Disabled URL</label>
  <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
  <label for="inputEmail">Disabled email address</label>
  <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
  <label for="inputPassword">Disabled password</label>
  <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
  <label for="inputDate">Disabled date</label>
  <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
  <label for="inputTime">Disabled time</label>
  <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
  <label for="inputNumber">Disabled number</label>
  <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
  <label for="inputRange">Disabled range</label>
  <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
  <label for="inputColor">Disabled color</label>
  <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
  <label for="inputFile">Disabled file input</label>
  <input type="file" class="{{modifier_class}}" disabled id="inputFile">
</div>
Source: sass/base/forms/_forms.scss, line 131

6.1.4 forms.base.input-checkbox Checkboxes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

If an <input> element has the type='checkbox' attribute set, the form field is displayed as a checkbox.

It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.

Example
Markup: base/forms/forms-input-checkbox.twig 
<div>
  <label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
</div>

<div>
  <label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
</div>
Source: sass/base/forms/_forms.scss, line 169

6.1.5 forms.base.input-radio Radio buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

If an <input> element has the type='radio' attribute set, the form field is displayed as a radio button.

It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.

Example
Markup: base/forms/forms-input-radio.twig 
<div>
  <label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
</div>

<div>
  <label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
</div>

<div>
  <label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
</div>
Source: sass/base/forms/_forms.scss, line 181

6.1.6 forms.base.label Labels

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <label> element represents a caption of a form field. The label can be associated with a specific form control by using the for attribute or by putting the form control inside the label element itself.

Example
Markup: base/forms/forms-label.twig 
<div>
  <label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
  <input type="text" id="lableInputText" placeholder="Enter some text">
</div>

<div>
  <label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
</div>
Source: sass/base/forms/_forms.scss, line 239

6.1.7 forms.base.select Select list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <select> element represents a form field for selecting amongst a set of options.

Known limitation: by default, Chrome and Safari on OS X allow very limited styling of <select>, unless a border property is set.

For most Drupal-based GNWT websites, the select element is replaced with the chosen module, negating any required styling.

Example
Markup: base/forms/forms-select.twig 
<div>
  <label for="selectDropdown">A standard drop-down</label>
  <select class="{{modifier_class}}" id="selectDropdown">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

<div>
  <label for="selectMultiItem">A multi-item select field</label>
  <select class="{{modifier_class}}" id="selectMultiItem" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

<div>
  <label for="selectDisabled">A disabled drop-down</label>
  <select class="{{modifier_class}}" id="selectDisabled" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>
Source: sass/base/forms/_forms.scss, line 255

6.1.8 forms.base.textarea Text areas

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <textarea> element represents a multi-line plain text form field.

Example
Markup: base/forms/forms-textarea.twig 
<div>
  <label for="exampleTextarea">Text area</label>
  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
</div>
<div>
  <label for="exampleTextarea">Disabled text area</label>
  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
</div>
Source: sass/base/forms/_forms.scss, line 281

6.2 forms.autocomplete Autocomplete field

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

As the user starts to type a value, a selection list appears below the form item allowing them to choose an option.

Examples
Default styling
  • guwatif
  • hichiuasl

 

.is-throbbing
Waiting for search result.
  • guwatif
  • hichiuasl

 

Markup: forms/autocomplete/autocomplete.twig 
<input type="text" value="" class="autocomplete {{modifier_class}}">
<div class="autocomplete__list-wrapper">
  <ul class="autocomplete__list">
  <li class="autocomplete__list-item">guwatif</li>
  <li class="autocomplete__list-item is-selected">hichiuasl</li>
  </ul>
</div>
<p>&nbsp;</p>
Source: sass/forms/autocomplete/_autocomplete.scss, line 1

6.3 forms.button Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

In addition to the default styling of <button> and <input type="submit|image|reset|button"> elements, the .button class and its variants can apply buttons styles to various elements (like an <a> link).

Examples
Default styling

Link button Disabled link button

:hover
Hover styling.

Link button Disabled link button

:active
Depressed button styling.

Link button Disabled link button

Markup: forms/button/button.twig 
<p>
  <button class="button {{modifier_class}}" type="button">Standard button</button>
  <button class="button {{modifier_class}}" type="button" disabled>Disabled button</button>
</p>
<p>
  <button class="button {{modifier_class}}" type="submit">Submit button</button>
  <button class="button {{modifier_class}}" type="submit" disabled>Disabled submit button</button>
</p>
<p>
  <button class="button {{modifier_class}}" type="reset">Reset button</button>
  <button class="button {{modifier_class}}" type="reset" disabled>Disabled reset button</button>
</p>
<p>
  <input class="button {{modifier_class}}" type="button" value="Input button">
  <input class="button {{modifier_class}}" type="button" value="Disabled input button" disabled>
</p>
<p>
  <input class="button {{modifier_class}}" type="submit" value="Input submit button">
  <input class="button {{modifier_class}}" type="submit" value="Disabled input submit button" disabled>
</p>
<p>
  <input class="button {{modifier_class}}" type="reset" value="Input reset button">
  <input class="button {{modifier_class}}" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button {{modifier_class}}" href="#">Link button</a>
  <a class="button {{modifier_class}}" disabled href="#">Disabled link button</a>
</p>
Source: sass/forms/button/_button.scss, line 1

6.4 forms.collapsible-fieldset Collapsible fieldset

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Fieldsets with optional entry fields can be hidden with collapsed fieldsets.

Examples
Default styling
A collapsible fieldset A summary of the form state
Place the form elements to hide inside this wrapping div.
.is-collapsed
The collapsed fieldset.
.hide-summary
Hide the summary or summary is empty.
A collapsible fieldset A summary of the form state
Place the form elements to hide inside this wrapping div.
.is-collapsed.hide-summary
Hide the summary or is empty collapsed.
Markup: forms/collapsible-fieldset/collapsible-fieldset.twig 
<fieldset class="collapsible-fieldset {{modifier_class}}">
  <legend>
    <span class="collapsible-fieldset__legend">
      <a href="#">A collapsible fieldset</a>
      <span class="collapsible-fieldset__summary">A summary of the form state</span>
    </span>
  </legend>
  <div class="collapsible-fieldset__wrapper">
    Place the form elements to hide inside this wrapping div.
  </div>
</fieldset>
Source: sass/forms/collapsible-fieldset/_collapsible-fieldset.scss, line 1

6.5 forms.form-item Form item

Toggle full screen Open in new window 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 
<div class="form-item {{modifier_class}}">
  <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
  <div class="form-item__description">
    Form item description.
  </div>
</div>
<div class="form-item {{modifier_class}}">
  <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
  <div class="form-item__description">
    Another form item description.
  </div>
</div>
Source: sass/forms/form-item/_form-item.scss, line 4

6.6 forms.form-item--radio Form item (radio)

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Checkboxes and radios require slightly different markup; their label is after their widget instead of before. Uses the .form-item--radio class variant of the normal form item and is placed on each of the nested form items.

Examples
Default styling
Form group description.
Form item description.
Form item description.
.is-error
Highlight the form elements that caused a form submission error.
Form group description.
Form item description.
Form item description.
Markup: forms/form-item/form-item--radio.twig 
<div class="form-item">
  <label class="form-item__label" for="group">Label for the group</label>
  <div class="form-item__description">
    Form group description.
  </div>
  <div class="form-item__group" id="group">
    <div class="form-item--radio {{modifier_class}}">
      <input class="form-item__widget" type="checkbox" id="option-1" value="1">
      <label class="form-item__label" for="option-1">Option 1</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
    <div class="form-item--radio {{modifier_class}}">
      <input class="form-item__widget" type="checkbox" id="option-2" value="2">
      <label class="form-item__label" for="option-2">Option 2</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
  </div>
</div>
Source: sass/forms/form-item/_form-item.scss, line 17

6.7 forms.form-table Drupal admin tables

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Complex forms that appear in html <table> elements.

If your custom theme isn't used for Drupal's admin pages, you can safely delete this component to save file weight in the generated CSS.

Example
Permission anonymous user authenticated user administrator
Permission anonymous user authenticated user administrator
Block
Administer blocks
Devel
Access developer information
View developer output like variable printouts, query log, etc. Warning: Give to trusted roles only; this permission has security implications.
Execute PHP code
Run arbitrary PHP from a block. Warning: Give to trusted roles only; this permission has security implications.
Markup: forms/form-table/form-table.twig 
<table class="form-table__sticky-header" style="position: fixed; visibility: visible;">
<thead>
  <tr>
    <th>Permission</th>
    <th class="form-table__narrow-column">anonymous user</th>
    <th class="form-table__narrow-column">authenticated user</th>
    <th class="form-table__narrow-column">administrator</th>
  </tr>
</thead>
</table>

<table class="form-table {{modifier_class}}">
<thead>
  <tr>
    <th>Permission</th>
    <th class="form-table__narrow-column">anonymous user</th>
    <th class="form-table__narrow-column">authenticated user</th>
    <th class="form-table__narrow-column">administrator</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="module" colspan="4">Block</td>
  </tr>
  <tr>
    <td class="permission">
      <div class="form-item form-type-item">
        Administer blocks
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox">
        <label class="element-invisible" for="edit-1-administer-blocks">anonymous user: Administer blocks </label>
        <input class="form-checkbox" id="edit-1-administer-blocks" name="1[administer blocks]" value="administer blocks" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-2-administer-blocks">
        <label class="element-invisible" for="edit-2-administer-blocks">authenticated user: Administer blocks </label>
        <input class="rid-2 form-checkbox" id="edit-2-administer-blocks" name="2[administer blocks]" value="administer blocks" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-3-administer-blocks">
        <label class="element-invisible" for="edit-3-administer-blocks">administrator: Administer blocks </label>
        <input class="rid-3 form-checkbox real-checkbox" id="edit-3-administer-blocks" name="3[administer blocks]" value="administer blocks" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
      </div>
    </td>
  </tr>
  <tr>
    <td class="module" colspan="4">Devel</td>
  </tr>
  <tr>
    <td class="permission">
      <div id="edit-access-devel-information" class="form-item form-type-item">
        Access developer information
        <div class="description">View developer output like variable printouts, query log, etc. <em class="permission-warning">Warning: Give to trusted roles only; this permission has security implications.</em></div>
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-1-access-devel-information">
        <label class="element-invisible" for="edit-1-access-devel-information">anonymous user: Access developer information </label>
        <input class="rid-1 form-checkbox" id="edit-1-access-devel-information" name="1[access devel information]" value="access devel information" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-2-access-devel-information">
        <label class="element-invisible" for="edit-2-access-devel-information">authenticated user: Access developer information </label>
        <input class="rid-2 form-checkbox" id="edit-2-access-devel-information" name="2[access devel information]" value="access devel information" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-3-access-devel-information">
        <label class="element-invisible" for="edit-3-access-devel-information">administrator: Access developer information </label>
        <input class="rid-3 form-checkbox real-checkbox" id="edit-3-access-devel-information" name="3[access devel information]" value="access devel information" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
      </div>
    </td>
  </tr>
  <tr>
    <td class="permission">
      <div id="edit-execute-php-code" class="form-item form-type-item">
        Execute PHP code
        <div class="description">Run arbitrary PHP from a block. <em class="permission-warning">Warning: Give to trusted roles only; this permission has security implications.</em></div>
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-1-execute-php-code">
        <label class="element-invisible" for="edit-1-execute-php-code">anonymous user: Execute PHP code </label>
        <input class="rid-1 form-checkbox" id="edit-1-execute-php-code" name="1[execute php code]" value="execute php code" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-2-execute-php-code">
        <label class="element-invisible" for="edit-2-execute-php-code">authenticated user: Execute PHP code </label>
        <input class="rid-2 form-checkbox" id="edit-2-execute-php-code" name="2[execute php code]" value="execute php code" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-3-execute-php-code">
        <label class="element-invisible" for="edit-3-execute-php-code">administrator: Execute PHP code </label>
        <input class="rid-3 form-checkbox real-checkbox" id="edit-3-execute-php-code" name="3[execute php code]" value="execute php code" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
      </div>
    </td>
  </tr>
</tbody>
</table>
Source: sass/forms/form-table/_form-table.scss, line 1

6.8 forms.progress-bar Progress bar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Shows the progress of a task in a simple bar graph.

Examples
Default styling
60%
Installing...
.progress-bar--inline
An inline progress bar.
60%
Installing...
Markup: forms/progress-bar/progress-bar.twig 
<div class="progress-bar {{modifier_class}}">
  <div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
  <div class="progress-bar__percentage">60%</div>
  <div class="progress-bar__message">Installing...</div>
</div>
Source: sass/forms/progress-bar/_progress-bar.scss, line 1

6.9 forms.progress-throbber Progress throbber

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Shows the progress of a task using a throbber.

Example
 
Progress message
Markup: forms/progress-throbber/progress-throbber.twig 
<div class="progress-throbber {{modifier_class}}">
  <div class="progress-throbber__widget">&nbsp;</div>
  <div class="progress-throbber__message">Progress message</div>
</div>
Source: sass/forms/progress-throbber/_progress-throbber.scss, line 1

6.10 forms.resizable-textarea Resizable textarea

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A textarea that can be resized with a "grippie" widget.

Example
Markup: forms/resizable-textarea/resizable-textarea.twig 
<textarea class="resizable-textarea {{modifier_class}}" rows="{{ rows }}">
{{ content }}
</textarea>
<div class="resizable-textarea__grippie"></div>
Source: sass/forms/resizable-textarea/_resizable-textarea.scss, line 1

6.11 forms.table-drag Table drag

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Drag and drop rows inside a form.

If your custom theme isn't used for Drupal's admin pages, you can safely delete this component to save file weight in the generated CSS.

Example
FieldLabelFormat
No field is displayed.
 
Image
Image style: Large (480x480)
 
Body*
 
Tags
Hidden
No field is hidden.
Markup: forms/table-drag/table-drag.twig 
<table class="tabledrag-processed">
<thead><tr><th>Field</th><th>Label</th><th colspan="3">Format</th></tr></thead>
<tbody>
  <tr class="region-message region-visible-message region-populated">
    <td colspan="7">No field is displayed.</td>
  </tr>
  <tr class="draggable tabledrag-leaf odd" id="field-image">
    <td><a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Image</td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-field-image-weight">
        <label class="visually-hidden" for="edit-fields-field-image-weight">Weight for Image</label>
        <input class="field-weight form-text" type="text" id="edit-fields-field-image-weight" name="fields[field_image][weight]" value="-1" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-field-image-parent">
        <label class="visually-hidden" for="edit-fields-field-image-parent">Label display for Image</label>
        <select class="field-parent form-select" id="edit-fields-field-image-parent" name="fields[field_image][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[field_image][parent_wrapper][hidden_name]" value="field_image">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-image-label">
        <label class="visually-hidden" for="edit-fields-field-image-label">Label display for Image</label>
        <select id="edit-fields-field-image-label" name="fields[field_image][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-image-type">
        <label class="visually-hidden" for="edit-fields-field-image-type">Formatter for Image</label>
        <select class="field-formatter-type form-select" id="edit-fields-field-image-type" name="fields[field_image][type]"><option value="image" selected="selected">Image</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td class="field-formatter-summary-cell">
      <div class="field-formatter-summary">Image style: Large (480x480)</div>
    </td>
    <td>
      <div class="field-formatter-settings-edit-wrapper">
        <input class="field-formatter-settings-edit form-submit ajax-processed" alt="Edit" type="image" id="edit-fields-field-image-settings-edit" name="field_image_formatter_settings_edit" src="http://drupal7x.dev/misc/configure.png">
      </div>
    </td>
  </tr>
  <tr class="draggable tabledrag-leaf even drag-previous" id="body">
    <td>
      <a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Body<span class="warning tabledrag-changed">*</span>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-body-weight">
        <label class="visually-hidden" for="edit-fields-body-weight">Weight for Body</label>
        <input class="field-weight form-text" type="text" id="edit-fields-body-weight" name="fields[body][weight]" value="0" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-body-parent">
        <label class="visually-hidden" for="edit-fields-body-parent">Label display for Body</label>
        <select class="field-parent form-select" id="edit-fields-body-parent" name="fields[body][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[body][parent_wrapper][hidden_name]" value="body">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-body-label">
        <label class="visually-hidden" for="edit-fields-body-label">Label display for Body</label>
        <select id="edit-fields-body-label" name="fields[body][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-body-type">
        <label class="visually-hidden" for="edit-fields-body-type">Formatter for Body</label>
        <select class="field-formatter-type form-select" id="edit-fields-body-type" name="fields[body][type]"><option value="text_default" selected="selected">Default</option><option value="text_plain">Plain text</option><option value="text_trimmed">Trimmed</option><option value="text_summary_or_trimmed">Summary or trimmed</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr class="draggable tabledrag-leaf odd" id="field-tags">
    <td>
      <a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Tags
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-field-tags-weight">
        <label class="visually-hidden" for="edit-fields-field-tags-weight">Weight for Tags</label>
        <input class="field-weight form-text" type="text" id="edit-fields-field-tags-weight" name="fields[field_tags][weight]" value="10" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-field-tags-parent">
        <label class="visually-hidden" for="edit-fields-field-tags-parent">Label display for Tags</label>
        <select class="field-parent form-select" id="edit-fields-field-tags-parent" name="fields[field_tags][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[field_tags][parent_wrapper][hidden_name]" value="field_tags">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-tags-label">
        <label class="visually-hidden" for="edit-fields-field-tags-label">Label display for Tags</label>
        <select id="edit-fields-field-tags-label" name="fields[field_tags][label]" class="form-select"><option value="above" selected="selected">Above</option><option value="inline">Inline</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-tags-type">
        <label class="visually-hidden" for="edit-fields-field-tags-type">Formatter for Tags</label>
          <select class="field-formatter-type form-select" id="edit-fields-field-tags-type" name="fields[field_tags][type]"><option value="taxonomy_term_reference_link" selected="selected">Link</option><option value="taxonomy_term_reference_plain">Plain text</option><option value="taxonomy_term_reference_rss_category">RSS category</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr class="region-title region-hidden-title"><td colspan="7">Hidden</td></tr>
  <tr class="region-message region-hidden-message region-empty"><td colspan="7">No field is hidden.</td></tr>
</tbody>
</table>
Source: sass/forms/table-drag/_table-drag.scss, line 1