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

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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)

Input-Fields

2.0.1

Input elements

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

What’s new since v2.0.0

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

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

CSS

Modifier classes:
  • input-field-block

LESS

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

Input size

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

What’s new since v2.0.0

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

CSS

Modifier classes:
  • input-field-lg

LESS

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

Disabled states

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

What’s new since v2.0.0

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

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

LESS

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

Input elements

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

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

Find out more about alert and error styling in forms.

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

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

CSS

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

LESS

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

Input size

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

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

CSS

Modifier classes:
  • input-field-large

LESS

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

Disabled states

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

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

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

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

	{FORM_INPUTS...}

</fieldset>

LESS

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

Inline input fields

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

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

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

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

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

LESS

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

Form layout

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

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

LESS

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

Input-Groups

2.0.1

Styled input fields with attached attributes ie $ or %.

What’s new since v2.0.0

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

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

LESS

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

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

LESS

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

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

LESS

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

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

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

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

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

Demo

What’s new since v2.0.3

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

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

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

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

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

CSS

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

LESS

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

Radios

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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)

Switches

2.0.1

Switches

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

What’s new since v2.0.0

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

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

CSS

Modifier classes:
  • switch-buff

LESS

The main mixin is called: _switches(BT)

Switch sizes

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

What’s new since v2.0.0

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

CSS

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

LESS

The main mixin is called: _switches(BT)

Switch responsive sizes

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

Demo

What’s new since v2.0.0

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

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _switches(BT)
2.0.2

Switches

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

CSS

Modifier classes:
  • switch-buff

LESS

The main mixin is called: _switches(BT)

Switch sizes

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

CSS

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

LESS

The main mixin is called: _switches(BT)

Switch responsive sizes

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

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

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

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _switches(BT)
3.0.0

Switches

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

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

CSS

Modifier classes:
  • switch-flip
  • switch-block

LESS

The main mixin is called: _switches(BT)

Switch sizes

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

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

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

Please only use the switch sizes provided.

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

CSS

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

LESS

The main mixin is called: _switches(BT)

Switch options

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

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

Block switches will maintain vertical spacing when stacked.

Demo

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

CSS

Modifier classes:
  • switch-block
  • switch-flip

LESS

The main mixin is called: _switches(BT)

Responsive switches

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

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

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

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

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

Demo

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

CSS

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

LESS

The main mixin is called: _switches(BT)
3.0.1

Switches

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

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

What’s new since v3.0.0

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

CSS

Modifier classes:
  • switch-flip
  • switch-block

LESS

The main mixin is called: _switches(BT)

Switch sizes

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

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

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

Please only use the switch sizes provided.

What’s new since v3.0.0

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

CSS

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

LESS

The main mixin is called: _switches(BT)

Switch options

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

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

Block switches will maintain vertical spacing when stacked.

Demo

What’s new since v3.0.0

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

CSS

Modifier classes:
  • switch-block
  • switch-flip

LESS

The main mixin is called: _switches(BT)

Responsive switches

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

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

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

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

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

Demo

What’s new since v3.0.0

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

What’s new since v2.0.2

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

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

CSS

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

LESS

The main mixin is called: _switches(BT)