Segmented Control CSS

April 27, 2019

Last update: April 27, 2019

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 !

View GitHub page

Installation

Via npm or yarn

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

Note: There are also SCSS files available if you prefer to bundle it in your own CSS

Get started

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

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

Appearance

Default

No class required

Rounded

Add the class .sc-rounded

<form>
  <div class="segmented-control sc-rounded">
    <div class="segmented-control-btn">
      <input type="radio" id="red" name="colors" value="red" checked />
      <label for="red">Red</label>
    </div>
    ...
  </div>
</form>

Round

Add the class .sc-round

<form>
  <div class="segmented-control sc-round">
    <div class="segmented-control-btn">
      <input
        type="radio"
        id="belgium"
        name="countries"
        value="belgium"
        checked
      />
      <label for="belgium">Belgium</label>
    </div>
    ...
  </div>
</form>

Colors

Add the class .sc-[name-of-your-color]

default
red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
<form>
  <div class="segmented-control sc-teal sc-round">
    <div class="segmented-control-btn">
      <input
        type="radio"
        id="strawberry"
        name="fruits"
        value="strawberry"
        checked
      />
      <label for="strawberry">Strawberry</label>
    </div>
    ...
  </div>
</form>

Animations

Default

No class required

Fade

Add the class .sc-fade

<form>
  <div class="segmented-control sc-round">
    <div class="segmented-control-btn">
      <input type="radio" id="winter" name="seasons" value="winter" checked />
      <label for="winter">Winter</label>
    </div>
    ...
  </div>
</form>

Slide

Add the class .sc-slide

<form>
  <div class="segmented-control sc-round">
    <div class="segmented-control-btn">
      <input type="radio" id="water" name="drinks" value="water" checked />
      <label for="water">Water</label>
    </div>
    ...
  </div>
</form>

Zoom

Add the class .sc-zoom

<form>
  <div class="segmented-control sc-round">
    <div class="segmented-control-btn">
      <input type="radio" id="rock" name="music" value="rock" checked />
      <label for="rock">Rock</label>
    </div>
    ...
  </div>
</form>

Customize

Segmented Control CSS only uses CSS, so you can easily overwrite the style with your own CSS classes. I recommend the structure below.

Button color

Copy this code into your CSS and replace [color-name], [color-text] and [color].

.segmented-control.sc-[color-name] input + label:before {
  background: [color];
}
.segmented-control.sc-[color-name] input[type="radio"]:checked + label {
  color: [color-text];
}

Then add the class [your-color-name] to the .segmented-control container

<form>
  <div class="segmented-control sc-[your-color-name]">
    <div class="segmented-control-btn">
      <input type="radio" id="rock" name="music" value="rock" checked />
      <label for="rock">Rock</label>
    </div>
    ...
  </div>
</form>

Button color when not checked

Copy this code into your CSS and replace [color].

.segmented-control-btn {
  background: [color] !important;
}