A front-end improvement to Bootstrap forms with a Material design.
Supports Bootstrap versions 3, 4 and 5.
Documentation »

Report bug · Request feature

Table of contents

• Quick start
• What's included
• Documentation
• Screenshots
• Builds
• Todo
• Creator

Quick start

• Use a cdn:

  • JavaScript (pick a provider):
    • unpkg: https://unpkg.com/[email protected]/dist/js/swapform.min.js
    • jsdelivr: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/swapform.min.js
  • CSS (pick a provider):
    • unpkg: https://unpkg.com/[email protected]/dist/css/swapform.min.css
    • jsdelivr: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/swapform.min.css

• Use npm:

  • npm install swapform

• Download a zip:

  • https://github.com/runthis/swapform/archive/refs/heads/master.zip

What's included

swapform/
└── dist/
    ├── css/
    │   ├── swapform.css
    │   ├── swapform.css.map
    │   ├── swapform.min.css
    │   └── swapform.min.css.map
    └── js/
        ├── swapform.js
        ├── swapform.js.map
        ├── swapform.min.js
        └── swapform.min.js.map

Documentation

Quite simply, wrap an input or textarea in a <div> element with an sf-form class. Then add the sf-label class to the <label> element. Swapform will automatically perform everything else.

Input examples

Basic

<div class="sf-form">
    <label class="sf-label">Enter username</label>
    <input type="text" class="form-control">
</div>

Swapping label when focused

<div class="sf-form">
    <label class="sf-label" data-description="Who are you?">Enter username</label>
    <input type="text" class="form-control">
</div>

Swapping multiple labels when focused and when input value is filled

<div class="sf-form">
    <label class="sf-label" data-description="Who are you?" data-filled="That's what she said">
        Enter username
    </label>
    <input type="text" class="form-control">
</div>

Textarea examples

The <textarea> element supports the same swapping methods outlined above, and also supports automatic height expansion, fixed heights and multiple sizes. Below is a table listing the available classes for a <textarea> depending on the features and size desired.

Classes for fixed heights and auto-expanding heights

Class	Suffix	Sizes	Description
sf-textarea-	sm, md, lg	160px, 320px, 640px	Automatically expands to a maximum height based on content
sf-textarea-fixed-	sm, md, lg	160px, 320px, 640px	Has a fixed height

Basic, medium, fixed height

Class: sf-textarea-fixed-md

<div class="sf-form">
    <label class="sf-label">Tell me a story</label>
    <textarea class="form-control sf-textarea-fixed-md"></textarea>
</div>

Basic, large, expanding height

Class: sf-textarea-lg

<div class="sf-form">
    <label class="sf-label">Tell me a story</label>
    <textarea class="form-control sf-textarea-lg"></textarea>
</div>

Basic, large, expanding height, with swapping texts

Class: sf-textarea-lg

Focused: Surprise me!

Filled: Cool story bro

<div class="sf-form">
    <label class="sf-label" data-description="Surprise me!" data-filled="Cool story bro">Tell me a story</label>
    <textarea class="form-control sf-textarea-lg"></textarea>
</div>

Supported classes

Basic

Class	Description
sf-form	Used to wrap around a <label> with an accompanying <input> or <textarea>

Labels

Class	Description
sf-label-sm	Should be used when using form-control-sm in your input/textarea elements
sf-label	Should be used when using regular form-control in your input/textarea elements
sf-label-lg	Should be used when using form-control-lg in your input/textarea elements

Textarea

Class	Description
sf-textarea-sm	Auto expanding height up to 160px
sf-textarea-md	Auto expanding height up to 320px
sf-textarea-lg	Auto expanding height up to 640px
sf-textarea	Auto expanding height infinitely
sf-textarea-fixed-sm	Fixed height, 160px
sf-textarea-fixed-md	Fixed height, 320px
sf-textarea-fixed-lg	Fixed height, 640px

Supported data attributes

These are used on <input> or <textarea> elements. The color and file input types are not supported at this time.

Option	Description
data-description	The value is swapped in when a form input or textarea is focused
data-filled	The value is swapped in when a form input or textarea has a value and is no longer focused

Screenshots

Basic

Using HTML

Using emojis

Auto expanding textarea

Builds

If you are using the npm build, you can rebuild the compiled assets after making any desired changes by running any of the following commands:

Option	Description
css-compile	Generates a non-minified version of the css and stores it in ./dist/css/swapform.css
css-minify	Generates a minified version of the css and stores it in ./dist/css/swapform.min.css
js-compile-dev	Generates a non-minified version of the javascript and stores it in ./js/dist/swapform.js
js-minify-dev	Generates a minified version of the javascript and stores it in ./js/dist/swapform.min.js
js-compile-prod	Generates a non-minified version of the javascript and stores it in ./dist/js/swapform.js
js-minify-prod	Generates a minified version of the javascript and stores it in ./dist/js/swapform.min.js

All the above commands also generate source maps

Todo

• Add a new method to detect errors on form validation and allow handling

Creator

Robert Miller

• https://www.robertjessemiller.com/
• https://github.com/runthis