Pro

Custom forms

Create new styles for checkbox or radio beyond Bootstrap customization

Overview

Because the Bootstrap Checkbox and radio buttons uses .active class when the checkbox/radio is checked, it is very easy to use data-fx effects on it! This way it is possible to create new styles without adding new entries into CSS sheet. Just use data-fx="a:{effect}" on <label class="btn">...</label> (because this elements gets .active class) or data-fx="ta:{effect}" on nested element inside <label class="btn" data-trigger="active">...</label>.

Checking the input

As it states in the Bootstrap documentation, the .active class is toggled only on click, but it doesn’t automatically toggle the checked state of the corresponding <input>. To resolve it, just add an id to <input> element and for to <label>.

Try to check the checkboxes and hit the submit button to see in the URL bar that inputs has beed checked.

<form>
  <div class="btn-group-toggle mb-2" data-toggle="buttons">
    <label for="customCheck1" class="btn px-2 btn-outline-dark active">
      <input id="customCheck1" type="checkbox" name="size" value="12" checked autocomplete="off">12
    </label>
    <label for="customCheck2" class="btn px-2 btn-outline-dark">
      <input id="customCheck2" type="checkbox" name="size" value="13" autocomplete="off">13
    </label>
    <label for="customCheck3" class="btn px-2 btn-outline-dark">
      <input id="customCheck3" type="checkbox" name="size" value="14" autocomplete="off">14
    </label>
  </div>
  <button type="submit" class="btn btn-secondary">Submit</button>
</form>

Checkbox examples

Basic example

Simple checkboxes that uses .btn-outline-dark class to distinguish between check and unchecked state.

<div class="d-flex" data1-fx="os:parallax[20] push[10rem]">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn px-2 btn-outline-dark active">
      <input type="checkbox" checked autocomplete="off">12
    </label>

    <label class="btn px-2 btn-outline-dark">
      <input type="checkbox" autocomplete="off">13
    </label>

    <label class="btn px-2 btn-outline-dark">
      <input type="checkbox" autocomplete="off">14
    </label>

  </div>
</div>

Circular

Create nice circular checkboxes by using Shapes component.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-outline-dark active circle circle-md">
      <span>12</span>
      <input type="checkbox" checked autocomplete="off">
    </label>

    <label class="btn btn-outline-dark circle circle-md">
      <span>13</span>
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn btn-outline-dark circle circle-md">
      <span>14</span>
      <input type="checkbox" autocomplete="off">
    </label>

  </div>
</div>

Background fill

Add .btn-fill or .btn-fill-skew class to .btn to create a background fill effect.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn px-2 btn-outline-dark btn-fill-skew active">
      <input type="checkbox" checked autocomplete="off">12
    </label>

    <label class="btn px-2 btn-outline-dark btn-fill-skew">
      <input type="checkbox" autocomplete="off">13
    </label>

    <label class="btn px-2 btn-outline-dark btn-fill-skew">
      <input type="checkbox" autocomplete="off">14
    </label>

  </div>
</div>

Border variants

More advance customization with use of border-md and data-fx effects - a:bg-navy (sets the background-color: navy) and a:text-white (sets color: #fff) when .btn gets .active class.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn px-2 border border-md active" data-fx="a:bg-navy a:text-white">
      <input type="checkbox" checked autocomplete="off">SM
    </label>

    <label class="btn px-2 border border-md" data-fx="a:bg-navy a:text-white">
      <input type="checkbox" autocomplete="off">MD
    </label>

    <label class="btn px-2 border border-md" data-fx="a:bg-navy a:text-white">
      <input type="checkbox" autocomplete="off">XL
    </label>

  </div>
</div>

Multi colored borders

It’s also possible to set custom border color with border[{color}] class and background color inside data-fx= with a:bg[{color}]

<div class="d-flex">
  <div class="btn-group-toggle mr-1" data-toggle="buttons">

    <label class="btn border-xl border[#109c9c] circle circle-xs active" data-fx="a:bg[#109c9c]">
      <input type="checkbox" autocomplete="off" checked>
    </label>

    <label class="btn border-xl border[#0501aa] circle circle-xs" data-fx="a:bg[#0501aa]">
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn border-xl border[#a501aa] circle circle-xs" data-fx="a:bg[#a501aa]">
      <input type="checkbox" autocomplete="off">
    </label>

  </div>
</div>

Font icon

Use Torus Kit icon font to outline checked input. This example uses .tk-icon-circle-fill class.

<div class="d-flex">
  <div class="btn-group-toggle mr-2" data-toggle="buttons">

    <label class="btn circle circle-sm bg[#109c9c] active" data-trigger="active">
      <input type="checkbox" autocomplete="off" checked>
      <i class="tk-icon-circle-fill text-white" data-fx="ta:shrink-in ta:fade-in"></i>
    </label>

    <label class="btn circle circle-sm bg[#0501aa]" data-trigger="active">
      <input type="checkbox" autocomplete="off">
      <i class="tk-icon-circle-fill text-white" data-fx="ta:shrink-in ta:fade-in"></i>
    </label>

    <label class="btn circle circle-sm bg[#a501aa]" data-trigger="active">
      <input type="checkbox" autocomplete="off">
      <i class="tk-icon-circle-fill text-white" data-fx="ta:shrink-in ta:fade-in"></i>
    </label>

  </div>
</div>

Mark border

Use {action}:outline effect to add border around the checkbox and outline the checked one.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn mr-1 circle circle-sm bg[#595F62] active" data-fx="h:outline a:outline outline-md">
      <input type="checkbox" autocomplete="off" checked>
    </label>

    <label class="btn mr-1 circle circle-sm bg[#E87687]" data-fx="h:outline a:outline outline-md">
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[navy]" data-fx="h:outline a:outline outline-md">
      <input type="checkbox" autocomplete="off">
    </label>

  </div>
</div>

CSS custom properties

CSS custom properties (variables) can be also used. Just define your CSS variables in the :root and use them in bg[var({--variable})].

:root {
  --black: #000;
  --forest-green: #407a7b;
  --olive: #6d7d59;
  --navy: #00313e;
  --deep-red: #881f2b;
}
<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn mr-1 circle circle-sm bg[var(--black)] active" data-fx="h:outline a:outline">
      <input type="checkbox" autocomplete="off" checked>
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--forest-green)]" data-fx="h:outline a:outline">
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--olive)]" data-fx="h:outline a:outline">
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--navy)]" data-fx="h:outline a:outline">
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--deep-red)]" data-fx="h:outline a:outline">
      <input type="checkbox" autocomplete="off">
    </label>

  </div>
</div>

Mask effect

More complex effects such as Mask can be also applied. Also add .z-index-1 class to element with the text and .pos-abs or .position-absolute class to data-fx.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn border p-0 active" data-trigger="active" data-fx="a:border-primary a:text-white">
      <span class="p-2 z-index-1">12</span>
      <div class="pos-abs w-h-100" data-fx="ta:mask-up skew"><div class="wrap bg-primary rounded-sm"></div></div>
      <input type="checkbox" autocomplete="off" checked>
    </label>

    <label class="btn border p-0" data-trigger="active" data-fx="a:border-primary a:text-white">
      <span class="p-2 z-index-1">13</span>
      <div class="pos-abs w-h-100" data-fx="ta:mask-up skew"><div class="wrap bg-primary rounded-sm"></div></div>
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn border p-0" data-trigger="active" data-fx="a:border-primary a:text-white">
      <span class="p-2 z-index-1">14</span>
      <div class="pos-abs w-h-100" data-fx="ta:mask-up skew"><div class="wrap bg-primary rounded-sm"></div></div>
      <input type="checkbox" autocomplete="off">
    </label>

  </div>
</div>

Switch style

Another example of using data-fx to create a switch-like checkbox.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn p-0 overflow-hidden pos-rel active" data-trigger="active">
      <span class="p-2 border rounded" data-fx="ta:push-down push-full">12</span>
      <span class="p-2 border bg-dark text-white pos-abs" data-fx="ta:pull-down pull-full">12</span>
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn p-0 overflow-hidden pos-rel" data-trigger="active">
      <span class="p-2 border rounded" data-fx="ta:push-down push-full">13</span>
      <span class="p-2 border bg-dark text-white pos-abs" data-fx="ta:pull-down pull-full">13</span>
      <input type="checkbox" autocomplete="off">
    </label>

    <label class="btn p-0 overflow-hidden pos-rel" data-trigger="active">
      <span class="p-2 border rounded" data-fx="ta:push-down push-full">14</span>
      <span class="p-2 border bg-dark text-white pos-abs" data-fx="ta:pull-down pull-full">14</span>
      <input type="checkbox" autocomplete="off">
    </label>

  </div>
</div>

Radio examples

Basic example

Simple radios that uses .btn-outline-dark class to distinguish between check and unchecked state.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn px-2 btn-outline-dark active">
      <input type="radio" name="example" checked autocomplete="off">12
    </label>

    <label class="btn px-2 btn-outline-dark">
      <input type="radio" name="example" autocomplete="off">13
    </label>

    <label class="btn px-2 btn-outline-dark">
      <input type="radio" name="example" autocomplete="off">14
    </label>

  </div>
</div>

Circular

Create nice circular radios by using Shapes component.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn btn-outline-primary active circle circle-md">
      <span>12</span>
      <input type="radio" name="example" checked autocomplete="off">
    </label>

    <label class="btn btn-outline-primary circle circle-md">
      <span>13</span>
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn btn-outline-primary circle circle-md">
      <span>14</span>
      <input type="radio" name="example" autocomplete="off">
    </label>

  </div>
</div>

Background fill

Add .btn-fill or .btn-fill-skew class to .btn to create a background fill effect.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn px-2 btn-outline-dark btn-fill-skew active">
      <input type="radio" checked autocomplete="off">12
    </label>

    <label class="btn px-2 btn-outline-dark btn-fill-skew">
      <input type="radio" autocomplete="off">13
    </label>

    <label class="btn px-2 btn-outline-dark btn-fill-skew">
      <input type="radio" autocomplete="off">14
    </label>

  </div>
</div>

Border variants

More advance customization with use of border-md and data-fx effects - a:bg-navy (sets the background-color: navy) and a:text-white (sets color: #fff) when .btn gets .active class.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn px-2 border border-md active" data-fx="a:bg-navy a:text-white">
      <input type="radio" name="example" checked autocomplete="off">SM
    </label>

    <label class="btn px-2 border border-md" data-fx="a:bg-navy a:text-white">
      <input type="radio" name="example" autocomplete="off">MD
    </label>

    <label class="btn px-2 border border-md" data-fx="a:bg-navy a:text-white">
      <input type="radio" name="example" autocomplete="off">XL
    </label>

  </div>
</div>

Multi colored borders

It’s also possible to set custom border color with border[{color}] class and background color inside data-fx= with a:bg[{color}]

<div class="d-flex">
  <div class="btn-group-toggle mr-1" data-toggle="buttons">

    <label class="btn border-xl border[#109c9c] circle circle-xs active" data-fx="a:bg[#109c9c]">
      <input type="radio" name="example" autocomplete="off" checked>
    </label>

    <label class="btn border-xl border[#0501aa] circle circle-xs" data-fx="a:bg[#0501aa]">
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn border-xl border[#a501aa] circle circle-xs" data-fx="a:bg[#a501aa]">
      <input type="radio" name="example" autocomplete="off">
    </label>

  </div>
</div>

Font icon

Use Torus Kit icon font to outline checked input. This example uses .tk-icon-circle-fill class.

<div class="d-flex">
  <div class="btn-group-toggle mr-2" data-toggle="buttons">

    <label class="btn circle circle-sm bg[#109c9c] active" data-trigger="active">
      <input type="radio" name="example" autocomplete="off" checked>
      <i class="tk-icon-circle-fill text-white" data-fx="ta:shrink-in ta:fade-in"></i>
    </label>

    <label class="btn circle circle-sm bg[#0501aa]" data-trigger="active">
      <input type="radio" name="example" autocomplete="off">
      <i class="tk-icon-circle-fill text-white" data-fx="ta:shrink-in ta:fade-in"></i>
    </label>

    <label class="btn circle circle-sm bg[#a501aa]" data-trigger="active">
      <input type="radio" name="example" autocomplete="off">
      <i class="tk-icon-circle-fill text-white" data-fx="ta:shrink-in ta:fade-in"></i>
    </label>

  </div>
</div>

Mark border

Use {action}:outline effect to add border around the radio and outline the checked one.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn mr-1 circle circle-sm bg[#595F62] active" data-fx="h:outline a:outline outline-md">
      <input type="radio" name="example" autocomplete="off" checked>
    </label>

    <label class="btn mr-1 circle circle-sm bg[#E87687]" data-fx="h:outline a:outline outline-md">
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[navy]" data-fx="h:outline a:outline outline-md">
      <input type="radio" name="example" autocomplete="off">
    </label>

  </div>
</div>

CSS custom properties

CSS custom properties (variables) can be also used. Just define your CSS variables in the :root and use them in bg[var({--variable})].

:root {
  --black: #000;
  --forest-green: #407a7b;
  --olive: #6d7d59;
  --navy: #00313e;
  --deep-red: #881f2b;
}
<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn mr-1 circle circle-sm bg[var(--black)] active" data-fx="h:outline a:outline">
      <input type="radio" name="example" autocomplete="off" checked>
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--forest-green)]" data-fx="h:outline a:outline">
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--olive)]" data-fx="h:outline a:outline">
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--navy)]" data-fx="h:outline a:outline">
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn mr-1 circle circle-sm bg[var(--deep-red)]" data-fx="h:outline a:outline">
      <input type="radio" name="example" autocomplete="off">
    </label>

  </div>
</div>

Mask effect

More complex effects such as Mask can be also applied. Also add .z-index-1 class to element with the text and .pos-abs or .position-absolute class to data-fx.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn border p-0 active" data-trigger="active" data-fx="a:border-primary a:text-white">
      <span class="p-2 z-index-1">12</span>
      <div class="pos-abs w-h-100" data-fx="ta:mask-up skew"><div class="wrap bg-primary rounded-sm"></div></div>
      <input type="radio" name="example" autocomplete="off" checked>
    </label>

    <label class="btn border p-0" data-trigger="active" data-fx="a:border-primary a:text-white">
      <span class="p-2 z-index-1">13</span>
      <div class="pos-abs w-h-100" data-fx="ta:mask-up skew"><div class="wrap bg-primary rounded-sm"></div></div>
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn border p-0" data-trigger="active" data-fx="a:border-primary a:text-white">
      <span class="p-2 z-index-1">14</span>
      <div class="pos-abs w-h-100" data-fx="ta:mask-up skew"><div class="wrap bg-primary rounded-sm"></div></div>
      <input type="radio" name="example" autocomplete="off">
    </label>

  </div>
</div>

Switch style

Another example of using data-fx to create a switch-like checkbox.

<div class="d-flex">
  <div class="btn-group-toggle" data-toggle="buttons">

    <label class="btn p-0 overflow-hidden pos-rel active" data-trigger="active">
      <span class="p-2 border rounded" data-fx="ta:push-down push-full">12</span>
      <span class="p-2 border bg-dark text-white pos-abs" data-fx="ta:pull-down pull-full">12</span>
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn p-0 overflow-hidden pos-rel" data-trigger="active">
      <span class="p-2 border rounded" data-fx="ta:push-down push-full">13</span>
      <span class="p-2 border bg-dark text-white pos-abs" data-fx="ta:pull-down pull-full">13</span>
      <input type="radio" name="example" autocomplete="off">
    </label>

    <label class="btn p-0 overflow-hidden pos-rel" data-trigger="active">
      <span class="p-2 border rounded" data-fx="ta:push-down push-full">14</span>
      <span class="p-2 border bg-dark text-white pos-abs" data-fx="ta:pull-down pull-full">14</span>
      <input type="radio" name="example" autocomplete="off">
    </label>

  </div>
</div>