swapform

:before{😐} :after{🤗}

demos • documentation

Demos

Basic

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

Your username

Swapping

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

Your username

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"

Your username

Textarea swapping

Top 5 TV shows

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.

Tell me a story

Select box

Where are you from?

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

swapform

:before{😐} :after{🤗}