/segmented-control-css

Segmented Control CSS allows you to create IOS style radio buttons. It is easy to use and no javascript is required. Less then 10 Ko and compatible with IE11!

Primary LanguageSCSSMIT LicenseMIT

Create IOS Style radio buttons (segmented controls) without any JavaScript code.

Official demo

Table of Contents

Installation

npm i segmented-control-css
yarn add segmented-control-css

Then add the segmented-control.min.css file to your <head>. The file is located in the dist folder.

<link
  rel="stylesheet"
  href="[path-to-segmented-control-css]/dist/segmented-control.min.css"
/>

You can also use the unpkg CDN.

<link
  rel="stylesheet"
  href="https://unpkg.com/segmented-control-css/dist/segmented-control.min.css"
/>

Usage

To make Segmented Control CSS work properly:

  • All options are grouped inside an .segmented-control container.
  • Each option should have:
    • A .segmented-control-btn wrapper.
    • An <input type="radio"> with an unique id.
    • A <label> with a for attribute

⚠️ Each .segmented-control-btn needs an input with an id and a label just behind. The "for" attribute of the label needs to be the same as the id of the input. ⚠️

Example

<form>
  <div class="segmented-control">
    <div class="segmented-control-btn">
      <input type="radio" id="react" name="frameworkJs" value="react" checked />
      <label for="react">React</label>
    </div>
    <div class="segmented-control-btn">
      <input type="radio" id="angular" name="frameworkJs" value="angular" />
      <label for="angular">Angular</label>
    </div>
    <div class="segmented-control-btn">
      <input type="radio" id="vue" name="frameworkJs" value="vue" />
      <label for="vue">Vue</label>
    </div>
  </div>
</form>

Colors

To change the color of the segmented controls add the class .sc-[colorClass].

<div class="segmented-control sc-red">
  <div class="segmented-control-btn">
    <input type="radio" id="react" name="frameworkJs" value="react" checked />
    <label for="react">React</label>
  </div>
</div>
Color name HEX code Class
default #7768ff sc-default
red #f44335 sc-red
pink #e81e61 sc-pink
purple #9b26af sc-purple
deep purple #663ab6 sc-deep-purple
indigo #3e50b4 sc-indigo
blue #2095f2 sc-blue
light blue #04a8f3 sc-light-blue
cyan #00bbd3 sc-cyan
teal #009587 sc-teal
green #4bad4f sc-green
light green #8ac249 sc-light-green
lime #ccdb38 sc-lime
yellow #feea39 sc-yellow
amber #fec007 sc-amber
orange #fe9700 sc-orange
deep orange #fe5623 sc-deep-orange
brown #785447 sc-brown
grey #9d9d9d sc-grey
blue grey #5f7c89 sc-blue-grey

Animations

To change the animation of the segmented controls use the class .sc-[animationClass].

<div class="segmented-control sc-zoom">
  <div class="segmented-control-btn">
    <input type="radio" id="react" name="frameworkJs" value="react" checked />
    <label for="react">React</label>
  </div>
</div>
Name class
Fade sc-fade
Slide sc-slide
Zoom sc-zoom

Border radius

Name class
Rounded sc-rounded
Round sc-round

Support

Please open an issue for support.

Author

Basile Bong

License

MIT