bantikyan / icheck-bootstrap

Pure css checkboxes and radio buttons for Twitter Bootstrap.

icheck-bootstrap

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
• HTML syntax
• ASP.NET MVC syntax
• Color schemes
• License

Getting started

Several quick start options are available:

• Download the latest release
• Install with Bower: bower install icheck-bootstrap
• Install with npm: npm install icheck-bootstrap
• Install with Nuget: Install-Package icheck-bootstrap
• Use CDN jsDelivr
• Use CDN cdnjs

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

• border color
• background color
• checkmark color

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.

icheck-bootstrap's Issues

icheck-primary is not working in Table

Hey Guys,

I recently started using icheck but got into problem, it is not working with bootstrap table. I am using Asp.Net 5 framework. Here is my code:

<table class="table table-bordered table-hover" style="border-top: 1px solid #dee2e6 !important">
    <thead>
        <tr>
            <th width="50%">Permissions</th>
            <th width="25%">Read</th>
            <th width="25%">ReadAndWrite</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Admin User</td>
            <td>
                <div class="icheck-primary">
                    <input asp-for="Admin_User_Read">
                    <label class="form-check-label"></label>
                </div>
            </td>
            <td>
                <div class="icheck-primary">
                    <input asp-for="Admin_User_ReadAndWrite">
                    <label class="form-check-label"></label>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Here is the output:

The issue I am facing is, I am unable to toggle the check box inside the table or unable to click.

Any help would be appriciated.

Regards
D

Sending value problem

What I have is:

<div class="icheck-primary">
     <input type="checkbox" value="1" id="save_client" name="save_client" checked>
     <label for="save_client">Save Client</label>
</div>

But I only want to send the value if is checked. If uncheck, send's the value 1 and I only need to send if checked. In code inspect I can verify that nothing change if I check or uncheck doesn't remove the attribute checked.
Can you help me please? And very nice work by the way ;-) Thanks in advance :-)

LESS/SASS

Do you happen to have this in a preprocessor source version somewhere for more granular control and customization?

horizontal radio button arrangement

hi,
What CSS code must i have in place (or take out) to make the radio buttons align horizontally on a single line instead of next line like on this block of code

                    <div class="radio icheck-primary">
                        <input type="radio" id="primary1" name="primary" />
                        <label for="primary1">primary 1</label>
                    </div>
                    <div class="radio icheck-primary">
                        <input type="radio" checked id="primary2" name="primary" />
                        <label for="primary2">primary 2</label>
                    </div>

how to change the checked state with javaScript

Sometimes, checkbox needs to change the state with js, so how can it do that.
thanks!

not working inside a dynamically generated content

Using Bootstrap 4.0, icheck-bootstrap from AdminLTE3

I have a modal that is cloned and triggered on click like so:

$('body').on('click', '.btn-modal-add-resource', function() {
        let modal = $('.resource-modal-template').clone().removeClass('.resource-modal-template')

        modal.modal()
        modal.on('hidden.bs.modal', function (e) { $(this).remove() })
})

and within that modal I have the html code:

<div class="form-group">
    <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>
</div>

the radio button cannot be clicked. unless I removed the icheck-primary class and follow the normal radio button from bootstrap - but that'd be without the style.. normally for this kind of issue is about initializing the element from javascript. but this library is fully css

Add support for indeterminate state

Add support for indeterminate state.

Version 1.0.8

Can you please publish current master branch as 1.0.8 version ? Bower command bower install icheck-bootstrap downloads version 1.0.7 which does NOT contain all CSS classes.

Stylessheet failed for group of checkboxes having same ID

Adding a group of checkboxes with same id results in stylesheel failure to recognize which checkbox it belongs to.

e.g.

<div>
    <div>Select countries from europe</div><br>
              <div class="">
                  <div class="icheck-primary">
                    <input id="countries" value="france" type="checkbox" checked>
                    <label>France</label>
                  </div>
                  <div class="icheck-primary">
                    <input id="countries" value="greece" type="checkbox">
                    <label>Greece</label>
                  </div>
                  <div class="icheck-primary d-inline">
                    <input id="countries" value="china" type="checkbox">
                    <label>china</label>
                  </div>
                </div>
<div>

Working on SASS

Problems rendering with WebForm Elements

Code doesn't work well with web forms elements. Item in rendered but not clickable
<div class="form-group"> <div class="icheck-success d-inline"> <asp:CheckBox ID="t2" runat="server" /> <label for="t2" runat="server">t2</label> </div> </div>

bootstrap 4 beta2

Hi @bantikyan I had this working with the alpha 6 version of bootstrap 4. we recently updated to beta2 and the checked state for both checkbox and radio button now looks messed up. what style changes do i need to get it working with boostrap 4 beta 2 ( also changed the bootstrap version in the code pen and you get what am talking about)