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.

Checkboxes

1.0.0

Checkboxes can sit either to the left or the right of the label.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
1.0.1

Checkboxes can sit either to the left or the right of the label.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
1.0.2

Checkboxes can sit either to the left or the right of the label.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
1.0.3

Checkboxes can sit either to the left or the right of the label.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
1.0.4

Checkboxes can sit either to the left or the right of the label.

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
2.0.0

Checkboxes can sit either to the left or the right of the label.

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
2.0.1

Checkboxes can sit either to the left or the right of the label.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
2.0.2

Checkboxes can sit either to the left or the right of the label.

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

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
2.0.3

Checkboxes can sit either to the left or the right of the label.

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

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from checkbox marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(STG)
2.0.4

Checkboxes can sit either to the left or the right of the label.

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

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .checkbox-block block level checkboxes; in addition to .checkbox-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from checkbox marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox [checkbox-flip] [checkbox-block]">
	<input type="checkbox" class="checkbox-input" name="{NAME}" value="{VALUE}">
	<span class="checkbox-text">{CHECKBOX_TEXT}</span>
</label>

CSS

Modifier class:
  • checkbox-flip
  • checkbox-block

LESS

The main mixin is called: _checkboxes(STG)
2.0.5

Checkboxes can sit either to the left or the right of the label.

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

What’s new since v2.0.4

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

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .checkbox-block block level checkboxes; in addition to .checkbox-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from checkbox marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<label class="checkbox [checkbox-flip] [checkbox-block]">
	<input type="checkbox" class="checkbox-input" name="{NAME}" id="{INPUT_ID}" value="{VALUE}" [checked]>
	<span class="checkbox-text">{CHECKBOX_TEXT}</span>
</label>

CSS

Modifier class:
  • checkbox-flip
  • checkbox-block

LESS

The main mixin is called: _checkboxes(STG)

Input-Fields

1.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. Find out more about alert and error styling in forms.

<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>

LESS

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

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.

<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(STG)

Disabled states

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

<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(STG)
1.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 v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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>

LESS

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

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 v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

Disabled states

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

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)
1.0.2

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 v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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>

LESS

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

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 v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

Disabled states

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

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)
1.0.3

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 v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

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 v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

Disabled states

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

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)
2.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. Find out more about alert and error styling in forms.

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

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 v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

Disabled states

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

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)
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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)

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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<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(STG)
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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<!-- 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(STG)

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.

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

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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

CSS

Modifier classes:
  • input-field-large

LESS

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

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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<!-- 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(STG)

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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<!-- 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(STG)

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! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
  • IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)
<!-- 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(STG)

Input-Groups

1.0.0

Styled input fields with attached attributes ie $ or %.

<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(STG)
2.0.0

Styled input fields with attached attributes ie $ or %.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)
<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(STG)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)
<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(STG)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)
<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(STG)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)
<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(STG)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)
<!-- 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(STG)

Radios

1.0.0

Radio buttons can sit either to the left or the right of the label.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
1.0.1

Radio buttons can sit either to the left or the right of the label.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
1.0.2

Radio buttons can sit either to the left or the right of the label.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
1.0.3

Radio buttons can sit either to the left or the right of the label.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
1.0.4

Radio buttons can sit either to the left or the right of the label.

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
2.0.0

Radio buttons can sit either to the left or the right of the label.

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
2.0.1

Radio buttons can sit either to the left or the right of the label.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
2.0.2

Radio buttons can sit either to the left or the right of the label.

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

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
2.0.3

Radio buttons can sit either to the left or the right of the label.

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

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from radio marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(STG)
2.0.4

Radios can sit either to the left or the right of the label.

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

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .radio-block block level radios; in addition to .radio-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from radio marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio [radio-flip] [radio-block]">
	<input type="radio" class="radio-input" name="{NAME}" value="{VALUE}">
	<span class="radio-text">{RADIO_TEXT}</span>
</label>

CSS

Modifier class:
  • radio-flip
  • radio-block

LESS

The main mixin is called: _radios(STG)
2.0.5

Radios can sit either to the left or the right of the label.

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

What’s new since v2.0.4

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

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .radio-block block level radios; in addition to .radio-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from radio marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<label class="radio [radio-flip] [radio-block]">
	<input type="radio" class="radio-input" name="{NAME}" id="{INPUT_ID}" value="{VALUE}" [checked]>
	<span class="radio-text">{RADIO_TEXT}</span>
</label>

CSS

Modifier class:
  • radio-flip
  • radio-block

LESS

The main mixin is called: _radios(STG)

Switches

1.0.0

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.

<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(STG)

Switch sizes

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

<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(STG)

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
<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(STG)
1.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 v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

Switch sizes

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

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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 v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)
2.0.0

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 v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

Switch sizes

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

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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 v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)
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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)
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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)
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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<!-- 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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<!-- 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(STG)
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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<!-- 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(STG)

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! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
  • We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.
<!-- 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(STG)