input-switch

Simple CSS for display checkbox and radio inputs as switch buttons.

Inspired by W3Schools example.

---

Example

Install

Via npm [package]:

$ npm install input-switch

Via yarn [package]:

$ yarn add input-switch

From unpkg:

<link rel="stylesheet" href="//unpkg.com/input-switch" />

From jsDelivr [package]:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/input-switch" />

Notice

If you installed via package manager, don't forget to import CSS into your project.

Usage

<label class="has-switch">
    <input type="checkbox" />
    <span class="switch is-round"></span>
    Example text
</label>

Modifiers

• .has-switch.has-half-space-after - space after switch is half sized

• .has-switch.has-no-space-after - space after switch is omitted

• .switch.is-square - switch is square shaped

• .switch.is-round - switch is round shaped

• .switch.is-outline - switch is outlined, can be combined with .is-square or .is-round

Customization

It's possible to customize some variables, for example colors:

@charset "utf-8";
 
$switch-primary-color: #5ac65a;
$switch-secondary-color: #ff7157;
 
@import "../node_modules/input-switch/src/input-switch.scss";

Default values for all customizable variables:

/* sizes */
$switch-height: 1em; // default height of switch 
$switch-width: $switch-height * 1.75; // default width of switch 
$switch-space-after-width: $switch-height * .5; // default space after switch 
 
/* colors */
$switch-primary-color: #2196f3; // default primary color of switch 
$switch-secondary-color: grey; // default secondary color of switch 
$switch-pointer-color: white; // default pointer color of switch 
$switch-transparent-color: transparent; // default transparent color of switch 
 
/* transitions */
$switch-transition-duration: .5s; // default transition duration of switch 
$switch-transition-timing-function: ease; // default transition timing function of switch 

---

License

MIT