Language selection

Search

Search

Form elements

Fieldsets

FLEX

Fieldsets are used to separate content in a form.

Legend of fieldset

Forms

FLEX

You can use .form-horizontal on <form> to display the label aligned at the left of the input. .form-group then behaves like a .row.

Input boxes allow the user to input content (e.g. name). For inputting dates, an HTML5 solution is available. With browsers that do not support HTML5 the date has to be input manually. The following has to be taken into account for barrier-free accessibility: The name of the form and the form box must be linked to a label. A label ID may only appear once on a page. Required fields must have sensible names or, preferably, use WAI.

You can use the .has-error, .has-warning or .has-success classes to send feedback to the user.

HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color

Fields marked with a * are compulsory

Email
Password
Warning, this is not a correct info!
Select date
Use format "DD/MM/YYYY"
Website
Use format "http://www.example.com"
Document
Terms
Terms
Terms
Terms
Dropdown
Dropdown 
// Code duplicated in footer to make the datepicker work in the styleguide
// Load Pikaday on date fields
if ($(window).width() > 767) {

  $('[type=date]').each(function(){
    // We need to change to type text to be able to write in another format
    // Just uncomment the following line:
    // $(this).prop('type', 'text');

    var picker = new Pikaday({
      field: $(this)[0],
      format: 'YYYY-MM-DD', // must be a input[type=text] to change this, see above
      firstDay: 1, // sets monday as first day
      theme: 'admin-theme',
      i18n: {
        previousMonth : 'Previous Month',
        nextMonth     : 'Next Month',
        months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
      }
    });
  });

}

Selects

FLEX

A drop down list box allows the user to select an item from a predefined list. This list appears in a menu after the element has been clicked on. After the selection has been made, the result is displayed. With more than 10 options in the select, a search field is setup at the top of the dropdown list.

Multi Selects

FLEX

Multi Selects behave the same as simple selects. But it is possible to select more than one option.

Checkboxes

FLEX

Checkboxes are used when one or more elements are to be selected from a predefined list of items.

(Optional) Question

Radios

FLEX

Radio buttons allow the user to make an unequivocal choice from a predefined list. Radio buttons can also be structured in groups. Only one element in a group may be selected.

(Optional) Question

Buttons

FLEX

A differentiation is made between primary and secondary buttons. The primary button is used for the main action (e.g. send), which can also be activated via the Enter key. The secondary button is used for less important actions, such as "Cancel".

The standard button can be used for a variety of actions. Buttons can also be grouped in a button group. As with the radio button groups, only one element can be selected within such a group.

Use the class .btn to create a styled button. You can use it on a <input>, <button> or <a> element. There are 4 button themes:

Buttons Markup

<button type="button" class="btn">Unstyled</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn" disabled>Disabled</button>

<button type="button" class="btn btn-link">Button link</button>

Print button

<button type="button" class="btn btn-link hidden-xs"><span class="icon icon--print"></span></button>

Button groups

FIX