Universität Heidelberg Gestaltungsrichtlinie

5.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: base/forms/_forms.scss, line 3

5.1.1 forms.base.button Buttons

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: base/forms/_forms.scss, line 78

5.1.2 forms.base.fieldset Fieldsets

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

Example

A fieldset Text input

A disabled fieldset

Disabled text input

Disabled select menu

Can't check this

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: base/forms/_forms.scss, line 181

5.1.3 forms.base.input Inputs

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.

Note: Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text.

Note: The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font, padding, border, or background. In Chrome and Safari on Windows you can't control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches). Safari (but not Chrome) will clip the cancel button on when it has padding (and textfield appearance).

Example

Text

Search

Telephone

URL

Email address

Password

Date

Time

Number

Range

Color

File input

Disabled text

Disabled search

Disabled telephone

Disabled URL

Disabled email address

Disabled password

Disabled date

Disabled time

Disabled number

Disabled range

Disabled color

Disabled file input

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: base/forms/_forms.scss, line 102

5.1.4 forms.base.input-checkbox Checkboxes

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

It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width.

Example

Check me out

Option two is disabled

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: base/forms/_forms.scss, line 149

5.1.5 forms.base.input-radio Radio buttons

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

It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width.

Example

Option one

Option two

Option three is disabled

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: base/forms/_forms.scss, line 161

5.1.6 forms.base.label Labels

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

A label for a text input

A label wrapped around a checkbox

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: base/forms/_forms.scss, line 211

5.1.7 forms.base.progress Progress

The <progress> element represents the completion progress of a task.

Source: base/forms/_forms.scss, line 245

5.1.8 forms.base.select Select list

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. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

Example

A standard drop-down

A multi-item select field

A disabled drop-down

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: base/forms/_forms.scss, line 227

5.1.9 forms.base.textarea Text areas

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

Example

Text area

Disabled text area

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: base/forms/_forms.scss, line 258

5.2 forms.button Button

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

.button--secondary

Secondary button.

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: forms/button/_button.scss, line 1

5.3 forms.progress-bar Progress bar

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: forms/progress-bar/_progress-bar.scss, line 1