https://github.com/runthis/swapform

A front-end improvement to Bootstrap forms with animations and a Material design
https://github.com/runthis/swapform

animation autoheight bootstrap css forms

Last synced: about 1 year ago
JSON representation

A front-end improvement to Bootstrap forms with animations and a Material design

Host: GitHub
URL: https://github.com/runthis/swapform
Owner: runthis
License: mit
Created: 2021-04-03T19:58:30.000Z (about 5 years ago)
Default Branch: main
Last Pushed: 2025-03-02T01:17:04.000Z (over 1 year ago)
Last Synced: 2025-03-18T14:44:58.407Z (about 1 year ago)
Topics: animation, autoheight, bootstrap, css, forms
Language: JavaScript
Homepage:
Size: 102 KB
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

          


  

    

  





  A front-end improvement to Bootstrap forms with a Material design.

  


  Supports Bootstrap versions 3, 4 and 5.

  


  Documentation »

  


  


  Report bug

  ·

  Request feature



[![Build](https://github.com/runthis/swapform/actions/workflows/build.yml/badge.svg)](https://github.com/runthis/swapform/actions/workflows/build.yml)

[![version](https://img.shields.io/github/package-json/version/runthis/swapform)](https://www.npmjs.com/package/swapform)

![bootstrap version](https://img.shields.io/npm/dependency-version/swapform/peer/bootstrap)

[![JS gzip size](https://img.badgesize.io/runthis/swapform/master/dist/js/swapform.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/runthis/swapform/blob/master/dist/js/swapform.min.js)

[![CSS gzip size](https://img.badgesize.io/runthis/swapform/master/dist/css/swapform.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/runthis/swapform/blob/master/dist/css/swapform.min.css)

[![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/swapform)](https://snyk.io/vuln/search?type=npm&q=swapform)

[![license](https://img.shields.io/npm/l/swapform)](https://github.com/runthis/swapform/blob/master/LICENSE)

[![CodeQL](https://github.com/runthis/swapform/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/runthis/swapform/actions/workflows/codeql-analysis.yml)

## Table of contents

- [Quick start](#quick-start)

- [What's included](#whats-included)

- [Documentation](#documentation)

- [Screenshots](#screenshots)

- [Builds](#builds)

- [Todo](#todo)

- [Creator](#creator)

## Quick start

- Use a cdn:

  - **JavaScript** *(pick a provider)*:

    - unpkg: 

    - jsdelivr: 

  - **CSS** *(pick a provider)*:

    - unpkg: 

    - jsdelivr: 

- Use [npm](https://www.npmjs.com/):

  - `npm install swapform`

- Download a zip:

  - 

## What's included

```text

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 `
` element with an `sf-form` class. Then add the `sf-label` class to the `` element. Swapform will automatically perform everything else.

### Input examples

#### Basic

    


        Enter username

        

    


![Basic swap](https://www.swapform.com/img/swap-8.gif)

#### Swapping label when focused

    


        Enter username

        

    


![Basic swap](https://www.swapform.com/img/swap-9.gif)

#### Swapping multiple labels when focused and when input value is filled

    


        

            Enter username

        

        

    


![Basic swap](https://www.swapform.com/img/swap-10.gif)

### Textarea examples

The `` 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 `` depending on the features and size desired.

![Expanding Textarea](https://www.swapform.com/img/swap-11.gif)

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

    


        Tell me a story

        

    


#### Basic, large, expanding height

*Class:* `sf-textarea-lg`

    


        Tell me a story

        

    


#### Basic, large, expanding height, with swapping texts

*Class:* `sf-textarea-lg`

*Focused:* `Surprise me!`

*Filled:* `Cool story bro`

    


        Tell me a story

        

    


### Supported classes

#### Basic

| Class     | Description                                                                |

| --------- | ------------------------------------------------------------------------------ |

| `sf-form` | Used to wrap around a `` with an accompanying `` or `` |

#### 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 `` or `` 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**

![Basic swap](https://www.swapform.com/img/swap-2.gif)

**Using HTML**

![HTML Swap](https://www.swapform.com/img/swap-4.gif)

**Using emojis**

![Emoji Swap](https://www.swapform.com/img/swap-6.gif)

**Auto expanding textarea**

![Expanding Textarea](https://www.swapform.com/img/swap-5.gif)

## Builds

If you are using the [npm build](https://www.npmjs.com/package/swapform), 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**

- 

-

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/runthis/swapform

Awesome Lists containing this project

README