Demos

Basic


This is a basic example that animates the label of the input element without any swapping.

Swapping


In this example we swap out "Your username" for "Who are you?" when the input is focused by the user.

Multiple swapping


Here we make 3 swaps. When the input is focused we swap "Your username" for "Who are you?", once the form is filled in and unfocused we swap out "Who are you?" for "Username"

Textarea swapping



Auto-expanding


This textarea will automatically expand in height. There are 4 different size options (small, medium, large, infinite). This example will expand to the medium size.

Select box



Documentation

Quick start


CSS

Place the stylesheet into the <head> section of your pages
<link href="https://cdn.jsdelivr.net/npm/swapform@1.1.5/dist/css/swapform.min.css" rel="stylesheet" integrity="sha384-+3eUgs577+T8GDbqKfSmwySyIdO8sxGi8Q1sz8Z48aJ5lFOTpGfIgS2/qu4RHG9U" crossorigin="anonymous">

JS

Place the script near the end of your pages, right before the closing </body> element
<script src="https://cdn.jsdelivr.net/npm/swapform@1.1.5/dist/js/swapform.min.js" integrity="sha384-4m+UKOEpqFlMgA38LbGczPXdIP6Z/p+QKqZm8BBtrO0KEEqgU1BqQeIbsxKe73kF" crossorigin="anonymous"></script>

Usage


Basic usage

Wrap each Bootstrap input that has a <label> and form-control class in a div with the class sf-form, and give the label a sf-label class.
<div class="sf-form">
	<label class="sf-label">Enter username</label>
	<input type="text" class="form-control">
</div>

Swapping usage

Wrap each Bootstrap input that has a <label> and form-control class in a div with the class sf-form, and give the label a sf-label class. Add a data-description attribute to the label with the text or HTML you want to swap in.
<div class="sf-form">
	<label class="sf-label" data-description="Who are you?">Enter username</label>
	<input type="text" class="form-control">
</div>

Multiple swaps usage

Wrap each Bootstrap input that has a <label> and form-control class in a div with the class sf-form, and give the label a sf-label class. Add a data-description attribute and a data-filled attribute to the label with the text or HTML you want to swap in.
<div class="sf-form">
	<label class="sf-label" data-description="Who are you?" data-filled="Username set!">Enter username</label>
	<input type="text" class="form-control">
</div>

Form sizes

To support form-control-sm and form-control-lg, you can set the accompanying size on the <label> class with -sm and -lg.
<!-- Small -->
<div class="sf-form">
	<label class="sf-label-sm">Enter username</label>
	<input type="text" class="form-control form-control-sm">
</div>
<!-- Large -->
<div class="sf-form">
	<label class="sf-label-lg">Enter username</label>
	<input type="text" class="form-control form-control-lg">
</div>

Basic <textarea>

The <textarea> element functions the exact same way, but also supports multiple heights and has an additional feature to allow heights that expand automatically.
<div class="sf-form">
	<label class="sf-label">Top 5 TV shows</label>
	<textarea class="form-control sf-textarea-fixed-sm"></textarea>
</div>

Expanding <textarea>

Add the sf-textarea-sm class to your <textarea> to allow it to automatically expand to 160px in height.
Three heights are supported: sf-textarea-md, sf-textarea-sm and sf-textarea-lg
<div class="sf-form">
	<label class="sf-label">Top 5 TV shows</label>
	<textarea class="form-control sf-textarea-sm"></textarea>
</div>

<textarea> classes

These classes can be swapped out to enable specific heights with specific features.
Expanding heights
Class Height Description
sf-textarea-sm 160px Expanding. Height starts out small and expands to a maximum of 160px
sf-textarea-md 320px Expanding. Height starts out small and expands to a maximum of 320px
sf-textarea-lg 640px Expanding. Height starts out small and expands to a maximum of 640px
sf-textarea Expanding. Height starts out small and expands to infinity
Fixed heights
Class Height Description
sf-textarea-fixed-sm 160px Starts with a height of 160px, does not auto expand
sf-textarea-fixed-md 320px Starts with a height of 320px, does not auto expand
sf-textarea-fixed-lg 640px Starts with a height of 640px, does not auto expand

<label> classes

These classes can be swapped out to enable specific sizes to accommodate smaller and larger forms.
Class Description
sf-label-sm Useful when using form-control-sm on an <input> element
sf-label Useful when using the regular form-control on an <input> element
sf-label-lg Useful when using form-control-lg on an <input> element

<label> data attributes

These data attributes are what you use to swap out label text.
Attribute Description
data-description Executes when an <input> element is focused by the user
data-filled Executes when an <input> element is no longer in focus by the user and the element has a value

Download options


zip

Download ready to use files that you can drop into your project. This includes the compiled CSS and JavaScript in both minified and expanded versions.
Download

npm

Install the swapform package via the npm package:
npm install swapform

cdn

jsdeliver
<!-- Swapform CSS -->
<link href="https://cdn.jsdelivr.net/npm/swapform@1.1.5/dist/css/swapform.min.css" rel="stylesheet" integrity="sha384-+3eUgs577+T8GDbqKfSmwySyIdO8sxGi8Q1sz8Z48aJ5lFOTpGfIgS2/qu4RHG9U" crossorigin="anonymous">

<!-- Swapform JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swapform@1.1.5/dist/js/swapform.min.js" integrity="sha384-4m+UKOEpqFlMgA38LbGczPXdIP6Z/p+QKqZm8BBtrO0KEEqgU1BqQeIbsxKe73kF" crossorigin="anonymous"></script>
unpkg
<!-- Swapform CSS -->
<link href="https://unpkg.com/swapform@1.1.5/dist/css/swapform.min.css" rel="stylesheet" integrity="sha384-+3eUgs577+T8GDbqKfSmwySyIdO8sxGi8Q1sz8Z48aJ5lFOTpGfIgS2/qu4RHG9U" crossorigin="anonymous">

<!-- Swapform JavaScript -->
<script src="https://unpkg.com/swapform@1.1.5/dist/js/swapform.min.js" integrity="sha384-4m+UKOEpqFlMgA38LbGczPXdIP6Z/p+QKqZm8BBtrO0KEEqgU1BqQeIbsxKe73kF" crossorigin="anonymous"></script>

git

Clone the package via git:
git clone https://github.com/runthis/swapform.git