Skip to content

3rror404/switchy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Switchy


A tiny library for creating realistic, iOS style switches

Checkbox-backed, draggable, swipeable and clickable switch that can be used as a form element.

👉 Demo

Features

☑️ Works with both checkbox and radio inputs.
☑️ Works with disabled inputs.
☑️ Swipeable with mouse or touch.
☑️ Position text labels before or after.
☑️ Built in colour themes.
☑️ Built in scales (small, default, large).

Usage

1. Add CSS to HEAD

<link rel="stylesheet" href="switchy.min.css">

2. Add JavaScript to end of BODY

<script src="switchy.min.js"></script>

3. Add HTML

<label class="switchy">
    <input type="checkbox">
    Text after
</label>

<label class="switchy">
    Text before
    <input type="checkbox">
</label>

<label class="switchy">
    <input type="checkbox" checked>
    A checked switch
</label>

4. Output

Example switches

About

Realistic iOS Style Switches

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published