Forms play an important role in our brand’s products and services. All roads lead to a form so it’s important to get them right. These basic form elements have been carefully crafted and rigorously tested. Use them as the foundation for any form creation.

Form Base

1.0.0

Form layout

The Form Base ingredient provides general form styling including form structure, layout and grouped input styling.

Always use form-group to wrap the elements that make up each question (label, hint text, input and error message text etc.). This will take care of spacing between questions.

Create sections within your form by using form-section to wrap related form groups. This creates a divider line and spacing between each section.

This example illustrates a form layout with two sections, the first of which has two form groups the second has one form group.

Demo
<!-- Form section(s) -->
<div class="form-section">

  <!-- Form group(s) -->
  <div class="form-group [form-group-large] [form-group-primary]">

    <!-- Input elements... -->
    <!-- e.g. label, hint text, error message, input control etc. -->

  </div>
  <!-- etc. -->

</div>
<!-- etc. -->

CSS

Main classes:

  • form-section
  • form-group
  • form-fieldset
  • form-error-message
  • input-label
  • input-sublabel
  • form-hint
  • form-inputs
  • form-chitchat
  • form-cross-sell
  • multipleitem

Modifier classes:

  • form-group-large
  • form-group-primary

LESS

The main mixin is called: _form-base(BT)

Form group

Forms are comprised of one or more form groups. These form-group blocks wrap the individual elements that make up each question (label, hint text, input and error message text etc.).

Use the form-group-primary modifier to center the contents of a form group. This modifier is used exclusively for the ’Fork’ pattern — a primary form group wrapping a button group.

This example illustrates a default form group (comprising of a simple text input) and a primary form group (showing the Fork pattern).

Input Fields and Buttons are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo
<!--  Default form group -->
<!-- Form group -->
<div class="form-group [form-group-large]">
  <label for="{INPUT_ID}" class="input-label [input-label-large]">
    This is a label
  </label>

  <p class="form-hint" id="{HINT_ID}">
    This is a hint
  </p>

  <p class="form-error-message" id="{ERROR_MESSAGE_ID}">
    <span class="icon icon-alert icon-xsmall" aria-hidden="true" data-grunticon-embed></span>
    This is an error message
  </p>

  <input
    type="text"
    class="input-field [input-field-large] [input-field-error]"
    name="{INPUT_NAME}"
    id="{INPUT_ID}"
    aria-describedby="{HINT_ID} {ERROR_MESSAGE_ID}"
    [aria-required="true"]
    [aria-invalid="true"]
  >
</div>

<!-- Primary form group (Fork pattern) -->
<div class="form-section">
  <!-- Form group (Primary) -->
  <div class="form-group [form-group-large] form-group-primary">
    <fieldset class="form-fieldset" aria-describedby="{HINT_ID} {ERROR_MESSAGE_ID}" [aria-required="true"] [aria-invalid="true"]>
      <!-- Legend -->
      <legend class="input-label [input-label-large]">
        {LABEL_TEXT}
      </legend>

      <!-- Hint -->
      <p class="form-hint" ID="{HINT_ID}">
        {HINT_TEXT}
      </p>

      <!-- Error message -->
      <p class="form-error-message" ID="{ERROR_MESSAGE_ID}">
        <span class="icon icon-alert icon-xsmall" aria-hidden="true" data-grunticon-embed></span>
        {ERROR_MESSAGE_TEXT}
      </p>

      <!-- Input control -->
      <div class="btn-group">
        <label for="{INPUT_ID}" class="btn-group-item">
          <input class="btn-group-input" type="radio"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
            value="{INPUT_VALUE}"
          >
          <span class="btn btn-{TYPE} [btn-large]">{BUTTON_TEXT}</span>
        </label>
        <label for="{INPUT_ID}" class="btn-group-item">
          <input class="btn-group-input" type="radio"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
            value="{INPUT_VALUE}"
          >
          <span class="btn btn-{TYPE} [btn-large]">{BUTTON_TEXT}</span>
        </label>
      </div>
    </fieldset>
  </div>
</div>

CSS

Main classes:

  • form-section
  • form-group
  • form-fieldset
  • form-error-message
  • input-label
  • input-sublabel
  • form-hint
  • form-inputs
  • form-chitchat
  • form-cross-sell
  • multipleitem

Modifier classes:

  • form-group-large
  • form-group-primary

LESS

The main mixin is called: _form-base(BT)

Input labels and hint text

Every input element in a form requires an associated text label to describe the expected value. Using placeholder text to provide this description is not recommended.

Hint text is additional text provided to aid the user in understanding the expected value and/or format. Use short and concise label text supplemented with hint text as necessary.

Input labels and hint text require explicit association via use of HTML attributes. For single input form groups set the label’s for attribute value to the input ID, and the input’s aria-describedby attribute value to the hint text ID. Grouped (fieldset) inputs are slightly different. Refer to the supporting HTML documentation for guidance.

Demo
<!-- Simple form group -->
<div class="form-group [form-group-large]">
  <!-- Label -->
  <label for="{INPUT_ID}" class="input-label [input-label-large]">{LABEL_TEXT}</label>

  <!-- Hint -->
  <p class="form-hint" id="{HINT_ID}">{HINT_TEXT}</p>

  <!-- Input -->
  <input
    type="text"
    class="input-field [input-field-large]"
    name="{INPUT_NAME}"
    id="{INPUT_ID}"
    aria-describedby="{HINT_ID}"
  >
</div>

<!-- Grouped (fieldset) input -->
<div class="form-group [form-group-large]">
  <fieldset class="form-fieldset" aria-describedby="{HINT_ID}">
    <!-- Label -->
    <legend class="input-label [input-label-large]">{LABEL_TEXT}</legend>

    <!-- Hint -->
    <p class="form-hint" id="{HINT_ID}">{HINT_TEXT}</p>

    <!-- Inputs... -->
  </fieldset>
</div>

CSS

Main classes:

  • form-section
  • form-group
  • form-fieldset
  • form-error-message
  • input-label
  • input-sublabel
  • form-hint
  • form-inputs
  • form-chitchat
  • form-cross-sell
  • multipleitem

Modifier classes:

  • form-group-large
  • form-group-primary

LESS

The main mixin is called: _form-base(BT)

Inline error messages

Inline error messages are displayed within form groups if they fail validation. They will generally also be accompanied by a page-level ’Error summary’ alert box which lists all validation errors on the page.

Inline error messages are always positioned above input elements. This best-practice approach ensures they are always visible; not scrolled out of view or covered by dropdowns etc. Use input-field-error to highlight the invalid text input.

As with hint text, inline error messages require explicit association with the input by adding the error message ID to the input’s aria-describedby attribute value.

Demo
<div class="form-group">
  <!-- Label... -->

  <!-- Hint... -->

  <!-- Error message -->
  <p class="form-error-message" id="{ERROR_MESSAGE_ID}">
    <span class="icon icon-alert icon-xsmall" aria-hidden="true" data-grunticon-embed></span>
    {ERROR_MESSAGE_TEXT}
  </p>

  <!-- Input -->
  <input
    type="text"
    class="input-field input-field-error"
    name="{INPUT_NAME}"
    id="{INPUT_ID}"
    aria-describedby="{HINT_ID ERROR_MESSAGE_ID}"
  >
</div>

CSS

Main classes:

  • form-section
  • form-group
  • form-fieldset
  • form-error-message
  • input-label
  • input-sublabel
  • form-hint
  • form-inputs
  • form-chitchat
  • form-cross-sell
  • multipleitem

Modifier classes:

  • form-group-large
  • form-group-primary

LESS

The main mixin is called: _form-base(BT)

Grouped (fieldset) inputs

Grouped inputs are a special type of input where a two or more input fields or controls are required in order to answer the question. These inputs require a very specific HTML structure in order to meet accessibility compliance, namely the use of a <legend> element and wrapping <fieldset> element.

Examples of grouped inputs include radios, checkboxes and button groups. They are also used in patterns such as Date of birth, Expiry date, Fork and Multi-line address.

Input Fields, Form Checks and Buttons are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo
<div class="form-section">
  <div class="form-group [form-group-large]">

    <!-- Fieldset -->
    <fieldset class="form-fieldset" aria-describedby="{HINT_ID} {ERROR_MESSAGE_ID}" [aria-required="true"] [aria-invalid="true"]>
      <!-- Legend -->
      <legend class="input-label [input-label-large]">
        {LABEL_TEXT}
      </legend>

      <!-- Hint -->
      <p class="form-hint" id="{HINT_ID}">
        {HINT_TEXT}
      </p>

      <!-- Error message -->
      <p class="form-error-message" id="{ERROR_MESSAGE_ID}">
        <span class="icon icon-alert icon-xsmall" aria-hidden="true" data-grunticon-embed></span>
        {ERROR_MESSAGE_TEXT}
      </p>

      <!-- Input control... -->

      <!-- Either radios/checkboxes -->
      <div class="form-checks">
        <div class="form-checks-item [form-checks-item-large]">
          <input type="{radio|checkbox}"
            class="form-checks-input"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
            value="{INPUT_VALUE}"
          >
          <label for="{INPUT_ID}" class="form-checks-label">{LABEL_TEXT}</label>
        </div>
        <div class="form-checks-item [form-checks-item-large]">
          <input type="{radio|checkbox}"
            class="form-checks-input"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
            value="{INPUT_VALUE}"
          >
          <label for="{INPUT_ID}" class="form-checks-label">{LABEL_TEXT}</label>
        </div>
      </div>

      <!-- or, button group -->
      <div class="btn-group">
        <label for="{INPUT_ID}" class="btn-group-item">
          <input class="btn-group-input" type="radio"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
            value="{INPUT_VALUE}"
          >
          <span class="btn btn-{TYPE} [btn-large]">{BUTTON_TEXT}</span>
        </label>
        <label for="{INPUT_ID}" class="btn-group-item">
          <input class="btn-group-input" type="radio"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
            value="{INPUT_VALUE}"
          >
          <span class="btn btn-{TYPE} [btn-large]">{BUTTON_TEXT}</span>
        </label>
      </div>

      <!-- or, date input -->
      <div class="form-inputs form-inputs-inline">
        <div class="form-inputs-item">
          <label for="{INPUT_ID}" class="input-sublabel">Day</label>
          <input
            type="number"
            pattern="[0-9]*"
            min="1"
            max="31"
            class="input-field [input-field-large] input-width-2 [input-field-error]"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
          >
        </div>
        <div class="form-inputs-item">
          <label for="{INPUT_ID}" class="input-sublabel">Month</label>
          <input
            type="number"
            pattern="[0-9]*"
            min="1"
            max="12"
            class="input-field [input-field-large] input-width-2 [input-field-error]"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
          >
        </div>
        <div class="form-inputs-item">
          <label for="{INPUT_ID}" class="input-sublabel">Year</label>
          <input
            type="number"
            pattern="[0-9]*"
            min="1896"
            max="2019"
            class="input-field [input-field-large] input-width-4 [input-field-error]"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
          >
        </div>
      </div>

      <!-- or, multi-line text input -->
      <div class="form-inputs">
        <div class="form-inputs-item">
          <!-- Sublabel -->
          <label for="{INPUT_ID}" class="input-sublabel sr-only">Line 1 of 2</label>

          <!-- Input -->
          <input
            type="text"
            autocomplete="street-address address-line1"
            class="input-field [input-field-large] [input-field-error]"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
          >
        </div>
        <div class="form-inputs-item">
          <!-- Sublabel -->
          <label for="{INPUT_ID}" class="input-sublabel sr-only">Line 2 of 2</label>

          <!-- Input -->
          <input
            type="text"
            autocomplete="street-address address-line2"
            class="input-field [input-field-large] [input-field-error]"
            name="{INPUT_NAME}"
            id="{INPUT_ID}"
          >
        </div>
      </div>

    </fieldset>

  </div>
</div>

CSS

Main classes:

  • form-section
  • form-group
  • form-fieldset
  • form-error-message
  • input-label
  • input-sublabel
  • form-hint
  • form-inputs
  • form-chitchat
  • form-cross-sell
  • multipleitem

Modifier classes:

  • form-group-large
  • form-group-primary

LESS

The main mixin is called: _form-base(BT)

Form Checks

1.0.0

Checkboxes and radios

Checkboxes and radios are provided by the Form Checks ingredient. Use Checkboxes for selecting one or several options in a list, or radios for selecting one option from many.

Checkboxes and radios are block-level by default; inline layout is available via a modifier class. Checkbox and radio toggles can sit either to the left or the right of the label text.

Refer to the Form-Base ‘Grouped (fieldset) inputs’ example to see how to use the <fieldset> element to wrap these checkboxes/radios as grouped inputs and meet accessibility compliance requirements.

Note: Due to accessiblity compliance requirements <input> and <label> elements must use the slightly more verbose ‘explicit association’ syntax. This requires id and for attributes to relate the input and label elements, rather than simply wrapping inputs with label elements.

Demo
<div class="form-checks [form-checks-flip]">
  <div class="form-checks-item [form-checks-item-large]">
    <input type="{checkbox|radio}" class="form-checks-input" name="{INPUT_NAME}" id="{INPUT_ID}" value="{INPUT_VALUE}">
    <label for="{INPUT_ID}" class="form-checks-label">{LABEL_TEXT}</label>
  </div>
  <!-- etc. -->
</div>

CSS

Main classes:

  • form-checks
  • form-checks-item
  • form-checks-input
  • form-checks-label

Modifier classes:

  • form-checks-flip
  • form-checks-item-large
  • form-checks-inline
  • form-inline

LESS

The main mixin is called: _form-checks(BT)

Input Fields

2.0.1

Input elements

Inputs are the most common form controls. Text-based input fields include support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and colour. The date element triggers the date selector in compliant browsers. Find out more about alert and error styling in forms.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

CSS

Modifier classes:
  • input-field-block

LESS

The main mixin is called: _input-fields(BT)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:
  • input-field-lg

LESS

The main mixin is called: _input-fields(BT)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(BT)
3.0.0

Input elements

Inputs are the most common form controls. Text-based input fields include support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and colour. The date element triggers the date selector in compliant browsers.

Note: Input fields are block-level by default. You can render inline inputs by wrapping the input(s) with a .form-inline classed element.

Find out more about alert and error styling in forms.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Text/email/password/number/date input-->
<label for="{INPUT_ID}">{LABEL_TEXT}</label>
<input type="[text|email|password|number|date]" id="{INPUT_ID}" name="{INPUT_NAME}" class="input-field [input-field-{size}]" placeholder="{PLACEHOLDER_TEXT}" [value="{DEFAULT_VALUE}"] [disabled] [readonly]>

<!-- Textarea input -->
<label for="{TEXTAREA_ID}">{LABEL_TEXT}</label>
<textarea id="{TEXTAREA_ID}" name="{INPUT_NAME}" class="input-field [input-field-{size}]" placeholder="{PLACEHOLDER_TEXT}" [disabled] [readonly]>[DEFAULT_VALUE]</textarea>

<!-- Select input -->
<label for="{SELECT_ID}">{LABEL_TEXT}</label>
<select id="{SELECT_ID}" name="{INPUT_NAME}" class="input-field [input-field-{size}]" [disabled]>
	<option value="{DEFAULT_VALUE}">Please select</option>
	<option value="{OPTION_VALUE_1}" [selected]>{OPTION_TEXT_1}</option>
	<option value="{OPTION_VALUE_2}" [selected]>{OPTION_TEXT_2}</option>
	<option value="{OPTION_VALUE_3}" [selected]>{OPTION_TEXT_3}</option>
	<option value="{OPTION_VALUE_4}" [selected]>{OPTION_TEXT_4}</option>
</select>

CSS

Modifier classes:
  • input-field-small
  • input-field-large
  • input-field-xlarge
  • form-inline

LESS

The main mixin is called: _input-fields(BT)

Input size

Input fields are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes. We generally use Large for mobile apps.

  • Small: 30px
  • Medium (default): 36px
  • Large: 42px
  • Extra large: 48px

Please only use the input sizes provided.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

CSS

Modifier classes:
  • input-field-large

LESS

The main mixin is called: _input-fields(BT)

Disabled states

Add the disabled attribute on an input or fieldset wrapper to prevent user input and trigger a slightly different look.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Disabled text/email/password/number/date input-->
<label for="{INPUT_ID}">{LABEL_TEXT}</label>
<input type="{TYPE}" id="{INPUT_ID}" name="{INPUT_NAME}" class="input-field" [value="{DEFAULT_VALUE}"] disabled>

<!-- Disabled textarea input -->
<label for="{TEXTAREA_ID}">{LABEL_TEXT}</label>
<textarea id="{TEXTAREA_ID}" name="{INPUT_NAME}" class="input-field" disabled>[DEFAULT_VALUE]</textarea>

<!-- Disabled select input -->
<label for="{SELECT_ID}">{LABEL_TEXT}</label>
<select id="{SELECT_ID}" name="{INPUT_NAME}" class="input-field" disabled>
	<option value="{DEFAULT_VALUE}">Please select</option>
	<option value="{OPTION_VALUE_1}" [selected]>{OPTION_TEXT_1}</option>
	<option value="{OPTION_VALUE_2}" [selected]>{OPTION_TEXT_2}</option>
	<option value="{OPTION_VALUE_3}" [selected]>{OPTION_TEXT_3}</option>
	<option value="{OPTION_VALUE_4}" [selected]>{OPTION_TEXT_4}</option>
</select>

<!-- Disabled fieldset wrapping -->
<fieldset disabled>
	<legend>{LEGEND_TEXT}</legend>

	{FORM_INPUTS...}

</fieldset>

LESS

The main mixin is called: _input-fields(BT)

Inline input fields

Input fields are block level by default; they span the full width of their parent element and fit to the grid. If you require inline inputs simply wrap your input(s) with a .form-inline classed element.

Buttons and Accessibility Helpers are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Inline form -->
<div class="form-inline">

	<!-- Username -->
	<div class="form-group">
		<label for="{INPUT_ID}" class="sr-only">{LABEL_TEXT}</label>
		<input type="{TYPE}" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}">
	</div>

	<!-- Password -->
	<div class="form-group">
		<label for="{INPUT_ID}" class="sr-only">{LABEL_TEXT}</label>
		<input type="{TYPE}" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}">
	</div>

	<!-- Button -->
	<button type="{TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
</div>

LESS

The main mixin is called: _input-fields(BT)

Form layout

Simply use the grid along with .form-group classed elements to wrap your label/input pairs ensuring reliable spacing for all breakpoints.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Simple form -->
<div class="form-group">
	{FORM_INPUT_AND_LABEL...}
</div>
<div class="form-group">
	{FORM_INPUT_AND_LABEL...}
</div>

<!-- Form with grid -->
<div class="row">
	<div class="col-sm-6">
		<div class="form-group">
			{FORM_INPUT_AND_LABEL...}
		</div>
	</div>
	<div class="col-sm-6">
		<div class="form-group">
			{FORM_INPUT_AND_LABEL...}
		</div>
	</div>
</div>

LESS

The main mixin is called: _input-fields(BT)
3.0.1

Input elements

The Input Fields ingredient provides styling for text inputs, textareas and select input elements and includes support for all HTML5 input types such as text, password, email and number etc.

Input fields are block-level by default. You can render inline inputs by wrapping the input(s) with a .form-inline classed element, as mentioned below.

Generally form input fields don’t exist on their own, they require additional elements such as labels, hint text, error messaging etc. Styling of these additional form elements and form layout is provided by Form-Base.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Dependency: GUI_colors v3.0.2, GUI_text-styling v4.0.5
  • Mapped new border colour @color-BorderDark from Colors v3.0.2 (#433)
  • Making use of the new accessible focus outline styling from Text-Styling v4.0.5 (#433)
  • Disabled number input spinners/steppers in WebKit
  • New size by character length classes (.input-width-*)
  • Removed .form-group styling; now part of new Form-Base module
  • Removed fieldset and legend styling
  • New .input-field-error class. Error styling is now applied per input, rather than via a parent .has-danger class. This allows us to indicate errors on individual inputs within grouped inputs. Error styling no longer applies text colour styling; now simply a border colour.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Text/email/password/number/date input-->
<label for="{INPUT_ID}">{LABEL_TEXT}</label>
<input type="{text|password|email|number}" id="{INPUT_ID}" name="{INPUT_NAME}" class="input-field [input-field-{size}]" [value="{DEFAULT_VALUE}"] [disabled] [readonly]>

<!-- Textarea input -->
<label for="{TEXTAREA_ID}">{LABEL_TEXT}</label>
<textarea id="{TEXTAREA_ID}" name="{INPUT_NAME}" class="input-field [input-field-{size}]" [disabled] [readonly]>[DEFAULT_VALUE]</textarea>

<!-- Select input -->
<label for="{SELECT_ID}">{LABEL_TEXT}</label>
<select id="{SELECT_ID}" name="{INPUT_NAME}" class="input-field [input-field-{size}]" [disabled]>
	<option value="{DEFAULT_VALUE}">Please select</option>
	<option value="{OPTION_VALUE_1}" [selected]>{OPTION_TEXT_1}</option>
	<option value="{OPTION_VALUE_2}" [selected]>{OPTION_TEXT_2}</option>
	<option value="{OPTION_VALUE_3}" [selected]>{OPTION_TEXT_3}</option>
	<option value="{OPTION_VALUE_4}" [selected]>{OPTION_TEXT_4}</option>
</select>

CSS

Sizing classes:

  • input-field-small
  • input-field-large
  • input-field-xlarge

Fixed width sizing classes:

  • input-width-2
  • input-width-3
  • input-width-4
  • input-width-5
  • input-width-10
  • input-width-20
  • input-width-30

Layout class:

  • form-inline

LESS

The main mixin is called: _input-fields(BT)

Input size

Input fields are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes. We generally use Large for mobile apps.

  • Small: 30px
  • Medium (default): 36px
  • Large: 42px
  • Extra large: 48px

Please only use the input sizes provided.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Dependency: GUI_colors v3.0.2, GUI_text-styling v4.0.5
  • Mapped new border colour @color-BorderDark from Colors v3.0.2 (#433)
  • Making use of the new accessible focus outline styling from Text-Styling v4.0.5 (#433)
  • Disabled number input spinners/steppers in WebKit
  • New size by character length classes (.input-width-*)
  • Removed .form-group styling; now part of new Form-Base module
  • Removed fieldset and legend styling
  • New .input-field-error class. Error styling is now applied per input, rather than via a parent .has-danger class. This allows us to indicate errors on individual inputs within grouped inputs. Error styling no longer applies text colour styling; now simply a border colour.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

CSS

Modifier classes:
  • input-field-large

LESS

The main mixin is called: _input-fields(BT)

Fixed width sizing

Use fixed width sizing classes to set a maximum width based on character length. These classes are particularly useful for content that has a specific, known length such as postcodes, telephone numbers and dates etc.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Dependency: GUI_colors v3.0.2, GUI_text-styling v4.0.5
  • Mapped new border colour @color-BorderDark from Colors v3.0.2 (#433)
  • Making use of the new accessible focus outline styling from Text-Styling v4.0.5 (#433)
  • Disabled number input spinners/steppers in WebKit
  • New size by character length classes (.input-width-*)
  • Removed .form-group styling; now part of new Form-Base module
  • Removed fieldset and legend styling
  • New .input-field-error class. Error styling is now applied per input, rather than via a parent .has-danger class. This allows us to indicate errors on individual inputs within grouped inputs. Error styling no longer applies text colour styling; now simply a border colour.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<input type="text" class="input-field input-width-{2|3|4|5|10|20|30}">

LESS

The main mixin is called: _input-fields(BT)

Inline input fields

Input fields are block level by default; they span the full width of their parent element and fit to the grid. If you require inline inputs simply wrap your input(s) with a .form-inline classed element.

Form Base and Buttons are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Dependency: GUI_colors v3.0.2, GUI_text-styling v4.0.5
  • Mapped new border colour @color-BorderDark from Colors v3.0.2 (#433)
  • Making use of the new accessible focus outline styling from Text-Styling v4.0.5 (#433)
  • Disabled number input spinners/steppers in WebKit
  • New size by character length classes (.input-width-*)
  • Removed .form-group styling; now part of new Form-Base module
  • Removed fieldset and legend styling
  • New .input-field-error class. Error styling is now applied per input, rather than via a parent .has-danger class. This allows us to indicate errors on individual inputs within grouped inputs. Error styling no longer applies text colour styling; now simply a border colour.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the input field sizing classes to our new naming convention (#380)
  • Updated input sizing and added input line-height
  • Select inputs are now block level by default as per other text inputs; use .form-inline wrapping for inline
  • Restyled and simplified select input markup; wrapping element (.input-field-select-wrapper) no longer required, SVG caret supplied via Grunticon, removed Hero color fill and .input-addon-faint modifier class
  • Dropped the .input-field-select, .input-field-select-{size} and .input-field-select-wrapper classes; simply use the common .input-field and .input-field-{size} classes on all input types (text input, textarea and select)
  • Removed fieldset sizing options; sizing already available per input via sizing classes .input-field-{size}
  • Merged :disabled and readonly state styling; using the former’s styling
  • Added default styling for label element; incl. bottom margin

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Inline form -->
<div class="form-inline">

	<!-- Username -->
	<div class="form-group">
		<label for="{INPUT_ID}" class="sr-only">{LABEL_TEXT}</label>
		<input type="{TYPE}" id="{INPUT_ID}" class="input-field">
	</div>

	<!-- Password -->
	<div class="form-group">
		<label for="{INPUT_ID}" class="sr-only">{LABEL_TEXT}</label>
		<input type="{TYPE}" id="{INPUT_ID}" class="input-field">
	</div>

	<!-- Button -->
	<button type="{TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
</div>

LESS

The main mixin is called: _input-fields(BT)

Input Groups

2.0.1

Styled input fields with attached attributes ie $ or %.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(BT)
2.0.2

Styled input fields with attached attributes ie $ or %.
To make it easier to use this element in a responsive site use the block option inside a col div.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The input-groups historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(BT)
2.0.3

Styled input fields with attached attributes ie $ or %.
To make it easier to use this element in a responsive site use the block option inside a col div.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Changed addon background colour from @color-Background to @color-Light. (#309)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The input-groups historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(BT)
3.0.0

Styled input fields with attached addons. Addons can be text ($, %, .00 etc) or form controls (buttons or select inputs).

Input addon elements can be positioned at either end of input fields and you may use multiple addons if necessary.

Input groups are block level by default; they span the full width of their parent element and fit to the grid. If you require inline inputs simply wrap your input(s) with a .form-inline classed element.

Input Fields are an independent ingredient (dependency) so make sure you include them in your blend.

Demo

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependency: GUI-input-fields v3.0.0
  • Input Groups now includes Input Addons (GUI-input-addons is now deprecated)
  • Input Groups are block by default (as per simple Input fields); wrap Input Groups with .form-inline for inline
  • Simplified approach to Input groups with simple text addons (.input-group-addon) and Input groups with button/select addons (.input-group-control)
  • Removed .input-addon-flip option; simply reorder group addon elements
  • Updated button sizing styling to our new naming convention (in Button v4.0.0) (#380)
  • Removed the hidden label from inside the input group; use .sr-only label outside the input group, linked by 'for' attribute (or simply wrap all in a label) for accessibility
  • Better handle input field :focus border beside other inputs
  • Fixed input group addon vertical alignment
  • Multiple addons are now supported
  • Input and addon CSS simplified
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Changed addon background colour from @color-Background to @color-Light. (#309)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The input-groups historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Text addon -->
<div class="input-group [input-group-{SIZE}]">
	<span class="input-group-addon">{ADDON_TEXT}</span>
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}">
</div>

<!-- Button addon -->
<div class="input-group [input-group-{SIZE}]">
	<span class="input-group-control">
		<button type="{BUTTON_TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
	</span>
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}">
</div>

<!-- Select addon -->
<div class="input-group [input-group-{SIZE}]">{
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}">
	<div class="input-group-control">
		<select name="{SELECT_NAME}"" id="{SELECT_ID}" class="input-field">
			<option value="{DEFAULT_VALUE}">Please select</option>
			<option value="{OPTION_VALUE_1}" [selected]>{OPTION_TEXT_1}</option>
			<option value="{OPTION_VALUE_2}" [selected]>{OPTION_TEXT_2}</option>
			<option value="{OPTION_VALUE_3}" [selected]>{OPTION_TEXT_3}</option>
			<option value="{OPTION_VALUE_4}" [selected]>{OPTION_TEXT_4}</option>
		</select>
	</div>
</div>

<!-- Inline form -->
<div class="form-inline">

	<!-- Input group -->
	<div class="form-group">
		<div class="input-group [input-group-{SIZE}]">
			<div class="input-group-addon">{ADDON_TEXT}</div>
			<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field" placeholder="{PLACEHOLDER_TEXT}">
			<span class="input-group-addon">{ADDON_TEXT}</span>
		</div>
	</div>

	<!-- Button -->
	<button type="{BUTTON_TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
</div>

CSS

Modifier classes:
  • input-group-small
  • input-group-large
  • input-group-xlarge
  • form-inline

LESS

The main mixin is called: _input-groups(BT)
3.0.1

Styled input fields with attached addons. Addons can be text ($, %, .00 etc) or form controls (buttons or select inputs).

Input addon elements can be positioned at either end of input fields and you may use multiple addons if necessary.

Input groups are block level by default; they span the full width of their parent element and fit to the grid. If you require inline inputs simply wrap your input(s) with a .form-inline classed element.

Input Fields are an independent ingredient (dependency) so make sure you include them in your blend.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Dependencies: GUI_colors v3.0.2, GUI-input-fields v3.0.1
  • Mapped new border colour @color-BorderDark from Colors v3.0.2 (#433)

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependency: GUI-input-fields v3.0.0
  • Input Groups now includes Input Addons (GUI-input-addons is now deprecated)
  • Input Groups are block by default (as per simple Input fields); wrap Input Groups with .form-inline for inline
  • Simplified approach to Input groups with simple text addons (.input-group-addon) and Input groups with button/select addons (.input-group-control)
  • Removed .input-addon-flip option; simply reorder group addon elements
  • Updated button sizing styling to our new naming convention (in Button v4.0.0) (#380)
  • Removed the hidden label from inside the input group; use .sr-only label outside the input group, linked by 'for' attribute (or simply wrap all in a label) for accessibility
  • Better handle input field :focus border beside other inputs
  • Fixed input group addon vertical alignment
  • Multiple addons are now supported
  • Input and addon CSS simplified
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Changed addon background colour from @color-Background to @color-Light. (#309)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The input-groups historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Text addon -->
<div class="input-group [input-group-{SIZE}]">
	<span class="input-group-addon">{ADDON_TEXT}</span>
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
</div>

<!-- Button addon -->
<div class="input-group [input-group-{SIZE}]">
	<span class="input-group-control">
		<button type="{BUTTON_TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
	</span>
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
</div>

<!-- Select addon -->
<div class="input-group [input-group-{SIZE}]">
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
	<div class="input-group-control">
		<select name="{SELECT_NAME}" id="{SELECT_ID}" class="input-field">
			<option value="{DEFAULT_VALUE}">Please select</option>
			<option value="{OPTION_VALUE_1}" [selected]>{OPTION_TEXT_1}</option>
			<option value="{OPTION_VALUE_2}" [selected]>{OPTION_TEXT_2}</option>
			<option value="{OPTION_VALUE_3}" [selected]>{OPTION_TEXT_3}</option>
			<option value="{OPTION_VALUE_4}" [selected]>{OPTION_TEXT_4}</option>
		</select>
	</div>
</div>

<!-- Inline form -->
<div class="form-inline">

	<!-- Input group -->
	<div class="form-group">
		<div class="input-group [input-group-{SIZE}]">
			<div class="input-group-addon">{ADDON_TEXT}</div>
			<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
			<span class="input-group-addon">{ADDON_TEXT}</span>
		</div>
	</div>

	<!-- Button -->
	<button type="{BUTTON_TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
</div>

CSS

Modifier classes:
  • input-group-small
  • input-group-large
  • input-group-xlarge
  • form-inline

LESS

The main mixin is called: _input-groups(BT)
3.0.2

Styled input fields with attached addons. Addons can be text ($, %, .00 etc) or form controls (buttons or select inputs).

Input addon elements can be positioned at either end of input fields and you may use multiple addons if necessary.

Input groups are block level by default; they span the full width of their parent element and fit to the grid. If you require inline inputs simply wrap your input(s) with a .form-inline classed element.

Input Fields are an independent ingredient (dependency) so make sure you include them in your blend.

Demo

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed the border left and right on the input fields when they use Button controls (#444)

What’s new since v3.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Dependencies: GUI_colors v3.0.2, GUI-input-fields v3.0.1
  • Mapped new border colour @color-BorderDark from Colors v3.0.2 (#433)

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Dependency: GUI-input-fields v3.0.0
  • Input Groups now includes Input Addons (GUI-input-addons is now deprecated)
  • Input Groups are block by default (as per simple Input fields); wrap Input Groups with .form-inline for inline
  • Simplified approach to Input groups with simple text addons (.input-group-addon) and Input groups with button/select addons (.input-group-control)
  • Removed .input-addon-flip option; simply reorder group addon elements
  • Updated button sizing styling to our new naming convention (in Button v4.0.0) (#380)
  • Removed the hidden label from inside the input group; use .sr-only label outside the input group, linked by 'for' attribute (or simply wrap all in a label) for accessibility
  • Better handle input field :focus border beside other inputs
  • Fixed input group addon vertical alignment
  • Multiple addons are now supported
  • Input and addon CSS simplified
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Changed addon background colour from @color-Background to @color-Light. (#309)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The input-groups historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Text addon -->
<div class="input-group [input-group-{SIZE}]">
	<span class="input-group-addon">{ADDON_TEXT}</span>
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
</div>

<!-- Button addon -->
<div class="input-group [input-group-{SIZE}]">
	<span class="input-group-control">
		<button type="{BUTTON_TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
	</span>
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
</div>

<!-- Select addon -->
<div class="input-group [input-group-{SIZE}]">
	<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
	<div class="input-group-control">
		<select name="{SELECT_NAME}" id="{SELECT_ID}" class="input-field">
			<option value="{DEFAULT_VALUE}">Please select</option>
			<option value="{OPTION_VALUE_1}" [selected]>{OPTION_TEXT_1}</option>
			<option value="{OPTION_VALUE_2}" [selected]>{OPTION_TEXT_2}</option>
			<option value="{OPTION_VALUE_3}" [selected]>{OPTION_TEXT_3}</option>
			<option value="{OPTION_VALUE_4}" [selected]>{OPTION_TEXT_4}</option>
		</select>
	</div>
</div>

<!-- Inline form -->
<div class="form-inline">

	<!-- Input group -->
	<div class="form-group">
		<div class="input-group [input-group-{SIZE}]">
			<div class="input-group-addon">{ADDON_TEXT}</div>
			<input type="{INPUT_TYPE}" name="{INPUT_NAME}" id="{INPUT_ID}" class="input-field">
			<span class="input-group-addon">{ADDON_TEXT}</span>
		</div>
	</div>

	<!-- Button -->
	<button type="{BUTTON_TYPE}" class="btn btn-{NAME}">{BUTTON_TEXT}</button>
</div>

CSS

Modifier classes:
  • input-group-small
  • input-group-large
  • input-group-xlarge
  • form-inline

LESS

The main mixin is called: _input-groups(BT)

Switches

2.0.1

Switches

These are very simple toggle switches ideal for use in settings or preference screens. The switch can be blank or contain a simple string for example; yes/no, on/off etc. Please note: These switches are a fixed width. They are not for use with longs text strings.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:
  • switch-buff

LESS

The main mixin is called: _switches(BT)

Switch sizes

Please do not use any other switch heights than those shown here.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:
  • switch-sm
  • switch-lg
  • switch-xl

LESS

The main mixin is called: _switches(BT)

Switch responsive sizes

You can resize the switches on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. switch-sm becomes switch-sm-lg for a switch that will change to a small switch on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _switches(BT)
2.0.2

Switches

These are very simple toggle switches ideal for use in settings or preference screens. The switch can be blank or contain a simple string for example; yes/no, on/off etc. Please note: These switches are a fixed width. They are not for use with longs text strings.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:
  • switch-buff

LESS

The main mixin is called: _switches(BT)

Switch sizes

Please do not use any other switch heights than those shown here.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:
  • switch-sm
  • switch-lg
  • switch-xl

LESS

The main mixin is called: _switches(BT)

Switch responsive sizes

You can resize the switches on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. switch-sm becomes switch-sm-lg for a switch that will change to a small switch on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _switches(BT)
3.0.0

Switches

These are very simple toggle switches ideal for use in settings or preference screens. The switch can be blank or contain simple toggle text labels (no/yes, off/on etc).

Note: Switch toggles are fixed width. They are best suited for use with short text.

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch [switch-flip] [switch-block]">
	<input type="checkbox" name="{NAME}" id="{INPUT_ID}" class="switch-input">
	<span class="[switch-text|switch-sronly]">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

CSS

Modifier classes:
  • switch-flip
  • switch-block

LESS

The main mixin is called: _switches(BT)

Switch sizes

Switches are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes.

  • Extra large: 48px
  • Large: 42px
  • Medium (default): 36px
  • Small: 30px

Switch widths can either be auto-sized (inline) or fit to the grid (block), see Block switches below.

Please only use the switch sizes provided.

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch switch-{SIZE}">
	<input type="checkbox" name={NAME} id="{INPUT_ID}" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

CSS

Modifier classes:
  • switch-small
  • switch-large
  • switch-xlarge

LESS

The main mixin is called: _switches(BT)

Switch options

Switch text renders on the left by default but can be placed on the right side if necessary; simply add a .switch-flip modifier class.

Switch widths are auto-sized (inline) by default; they’re as wide as their text. Block level switches span the full width of their parent element and fit to the grid. These are often used in the XS breakpoint (generally for mobile devices) and inside narrow containers like Button Dropdowns.

Block switches will maintain vertical spacing when stacked.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Block switch -->
<label class="switch switch-block">
	<input type="checkbox" name="{NAME}" id="{SWITCH_ID}" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

<!-- Flipped switch -->
<label class="switch switch-flip">
	<input type="checkbox" name="{NAME}" id="{SWITCH_ID}" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

CSS

Modifier classes:
  • switch-block
  • switch-flip

LESS

The main mixin is called: _switches(BT)

Responsive switches

Style switches according to grid breakpoints by appending the breakpoint to your modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example switch-small becomes switch-small-md for a switch that will change to Small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • switch-{size}-{breakpoint}: The switch will render at the given size at the given breakpoint and wider
  • switch-{size}-{breakpoint}-only: The switch will render at the given size at the given breakpoint only

Tip: Use multiple responsive classes on your switch to get the desired effect. Start with setting the default switch size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .switch-{size}-xs or .switch-{size}-lg-only classes; simply use .switch-{size} and .switch-{size}-lg respectively.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- This breakpoint and wider -->
<label class="switch switch-{SIZE}-{BREAKPOINT}">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
</label>

<!-- This breakpoint only -->
<label class="switch switch-{SIZE}-{BREAKPOINT}-only">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
</label>

CSS

Modifier classes:
  • switch-small-sm
  • switch-medium-sm
  • switch-large-sm
  • switch-xlarge-sm
  • switch-small-md
  • switch-medium-md
  • switch-large-md
  • switch-xlarge-md
  • switch-small-lg
  • switch-medium-lg
  • switch-large-lg
  • switch-xlarge-lg
  • switch-small-xs-only
  • switch-medium-xs-only
  • switch-large-xs-only
  • switch-xlarge-xs-only
  • switch-small-sm-only
  • switch-medium-sm-only
  • switch-large-sm-only
  • switch-xlarge-sm-only
  • switch-small-md-only
  • switch-medium-md-only
  • switch-large-md-only
  • switch-xlarge-md-only

LESS

The main mixin is called: _switches(BT)
3.0.1

Switches

These are very simple toggle switches ideal for use in settings or preference screens. The switch can be blank or contain simple toggle text labels (no/yes, off/on etc).

Note: Switch toggles are fixed width. They are best suited for use with short text.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML, but not: JS
  • Fixing switch layout for Firefox (#407)
  • Ensuring sibling switches are top aligned

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch [switch-flip] [switch-block]">
	<input type="checkbox" name="{NAME}" id="{INPUT_ID}" class="switch-input">
	<span class="[switch-text|switch-sronly]">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

CSS

Modifier classes:
  • switch-flip
  • switch-block

LESS

The main mixin is called: _switches(BT)

Switch sizes

Switches are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes.

  • Extra large: 48px
  • Large: 42px
  • Medium (default): 36px
  • Small: 30px

Switch widths can either be auto-sized (inline) or fit to the grid (block), see Block switches below.

Please only use the switch sizes provided.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML, but not: JS
  • Fixing switch layout for Firefox (#407)
  • Ensuring sibling switches are top aligned

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<label class="switch switch-{SIZE}">
	<input type="checkbox" name={NAME} id="{INPUT_ID}" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

CSS

Modifier classes:
  • switch-small
  • switch-large
  • switch-xlarge

LESS

The main mixin is called: _switches(BT)

Switch options

Switch text renders on the left by default but can be placed on the right side if necessary; simply add a .switch-flip modifier class.

Switch widths are auto-sized (inline) by default; they’re as wide as their text. Block level switches span the full width of their parent element and fit to the grid. These are often used in the XS breakpoint (generally for mobile devices) and inside narrow containers like Button Dropdowns.

Block switches will maintain vertical spacing when stacked.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML, but not: JS
  • Fixing switch layout for Firefox (#407)
  • Ensuring sibling switches are top aligned

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Block switch -->
<label class="switch switch-block">
	<input type="checkbox" name="{NAME}" id="{SWITCH_ID}" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

<!-- Flipped switch -->
<label class="switch switch-flip">
	<input type="checkbox" name="{NAME}" id="{SWITCH_ID}" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
	<span class="switch-toggle"></span>
</label>

CSS

Modifier classes:
  • switch-block
  • switch-flip

LESS

The main mixin is called: _switches(BT)

Responsive switches

Style switches according to grid breakpoints by appending the breakpoint to your modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example switch-small becomes switch-small-md for a switch that will change to Small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • switch-{size}-{breakpoint}: The switch will render at the given size at the given breakpoint and wider
  • switch-{size}-{breakpoint}-only: The switch will render at the given size at the given breakpoint only

Tip: Use multiple responsive classes on your switch to get the desired effect. Start with setting the default switch size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .switch-{size}-xs or .switch-{size}-lg-only classes; simply use .switch-{size} and .switch-{size}-lg respectively.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML, but not: JS
  • Fixing switch layout for Firefox (#407)
  • Ensuring sibling switches are top aligned

What’s new since v2.0.2

This version changed: CSS/LESS, HTML, but not: JS
  • Introducing our new class size naming convention of .switch-[small|large|xlarge] (rather than .switch-[sm|lg|xl]). This approach frees up the 'xs/sm/md/lg' abbreviations to refer solely to viewport breakpoint. (#360, #380)
  • New responsive 'sizing by breakpoint' functionality (as per Buttons v4.0.0) (#382)
  • New .switch-toggle element required after .switch-text; markup structure now matches Radios and Checkboxes with .[radio|checkbox|switch]-text class referring to the form control’s visible text. This visible .switch-text element lives inside the Switch bounds and can be styled as needed. Use .switch-sronly class to hide switch text if necessary.
  • Optional Off/On element’s class .switch-text-[off|on] renamed; now.switch-toggle-off and .switch-toggle-on, now aligned correctly
  • New block level switches; in addition to .switch-flip option
  • Provided styling for :disabled and :checked states
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- This breakpoint and wider -->
<label class="switch switch-{SIZE}-{BREAKPOINT}">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
</label>

<!-- This breakpoint only -->
<label class="switch switch-{SIZE}-{BREAKPOINT}-only">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">{SWITCH_TEXT}</span>
</label>

CSS

Modifier classes:
  • switch-small-sm
  • switch-medium-sm
  • switch-large-sm
  • switch-xlarge-sm
  • switch-small-md
  • switch-medium-md
  • switch-large-md
  • switch-xlarge-md
  • switch-small-lg
  • switch-medium-lg
  • switch-large-lg
  • switch-xlarge-lg
  • switch-small-xs-only
  • switch-medium-xs-only
  • switch-large-xs-only
  • switch-xlarge-xs-only
  • switch-small-sm-only
  • switch-medium-sm-only
  • switch-large-sm-only
  • switch-xlarge-sm-only
  • switch-small-md-only
  • switch-medium-md-only
  • switch-large-md-only
  • switch-xlarge-md-only

LESS

The main mixin is called: _switches(BT)