icheck-bootstrap

    3.0.1 • Public • Published

    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.

    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

    License

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

    Install

    npm i icheck-bootstrap

    DownloadsWeekly Downloads

    20,742

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    34.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • bantikyan