search

bantikyan / icheck-bootstrap

Pure css checkboxes and radio buttons for Twitter Bootstrap.
https://bantikyan.github.io/icheck-bootstrap/
MIT License
141 stars 35 forks source link
asp-net-mvc bootstrap checkbox icheck icheck-bootstrap pure-css radio-buttons

readme

icheck-bootstrap

bower version npm version nuget version

Did you had a problem customizing html checkboxes and radio buttons? icheck-bootstrap is pure css solution for displaying twitter bootstrap style checkboxes and radio buttons. Try Demo.

You may also like to try icheck-material.
Love cool tech? Check out CoolTechUnder.com

Table of contents

Getting started

Several quick start options are available:

HTML syntax

checkbox example

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

radio buttons example

<div class="icheck-primary">
    <input type="radio" id="someRadioId1" name="someGroupName" />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    <input type="radio" id="someRadioId2" name="someGroupName" />
    <label for="someRadioId2">Option 2</label>
</div>

inline styling

To have checkboxes or radio buttons inline use .icheck-inline class

<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb1" />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb2" />
    <label for="chb2">Label 2</label>
</div>

disabled

Use disabled attribute on your input (checkbox or radio) to have disabled style.

no label

To have components without label, you still have to have label control with empty text.

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>

ASP.NET MVC syntax

checkbox example

<div class="icheck-primary">
    @Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
    <label for="someCheckboxId">Click to check</label>
</div>

radio buttons example

<div class="icheck-primary">
    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" }) 
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    @Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
    <label for="someRadioId2">Option 2</label>
</div>

Color schemes

Try Demo

Twitter Bootstrap: As you can see in previous examples, icheck-primary class used for styling. You can use following classes for Twitter Bootstrap color scheme:

.icheck-default
.icheck-primary
.icheck-success
.icheck-info
.icheck-warning
.icheck-danger

Flat UI Colors: Also you can use one of the really nice colors from flatuicolors.com

.icheck-turquoise
.icheck-emerland
.icheck-peterriver
.icheck-amethyst
.icheck-wetasphalt
.icheck-greensea
.icheck-nephritis
.icheck-belizehole
.icheck-wisteria
.icheck-midnightblue
.icheck-sunflower
.icheck-carrot
.icheck-alizarin
.icheck-clouds
.icheck-concrete
.icheck-orange
.icheck-pumpkin
.icheck-pomegranate
.icheck-silver
.icheck-asbestos

Building

To build this CSS from SCSS files, use the following script :

npm run build

Customization

By using the SCSS files you can easily customize your icheck size and colors.

To customize the easiest way is to load icheck as a module by using the @use rule. 

@use "./node_modules/icheck-bootstrap/scss/icheck-bootstrap" with (
    $size: 27px,
    $custom-colors: (
      'success': #FFFF00 #FF0000 #00FF00,
      'mycolor': #FF0000,
    )
)

As you can see in this example, size of checkboxes and radio buttons will be 27px (instead of the default 22px). success color is overwritten and mycolor is added, you can now use "icheck-mycolor" as a class.

Colors

If you watch the example above, colors are defined with one, two or three values separated by a space and in this order

If only one value is set, this value is used for border and background color, the checkmark will use the default color.

If only two values are set, the checkmark will use the default color.

License

icheck-bootstrap released under the MIT license. Feel free to use it in personal and commercial projects.