Awesome
icheck-bootstrap
<a href="#" target="_blank"><img src="https://img.shields.io/badge/bower-v3.0.1-blue.svg" alt="bower version"></a> <a href="https://www.npmjs.com/package/icheck-bootstrap" target="_blank"><img src="https://img.shields.io/badge/npm-v3.0.1-blue.svg" alt="npm version"></a> <a href="https://www.nuget.org/packages/icheck-bootstrap" target="_blank"><img src="https://img.shields.io/badge/nuget-v3.0.1-blue.svg" alt="nuget version"></a>
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
- <a href="#user-content-getting-started">Getting started</a>
- <a href="#user-content-html-syntax">HTML syntax</a>
- <a href="#user-content-aspnet-mvc-syntax">ASP.NET MVC syntax</a>
- <a href="#user-content-color-schemes">Color schemes</a>
- <a href="#user-content-license">License</a>
Getting started
Several quick start options are available:
- Download the latest release
- Install with Bower: <code>bower install icheck-bootstrap</code>
- Install with npm: <code>npm install icheck-bootstrap</code>
- Install with Nuget: <code>Install-Package icheck-bootstrap</code>
- 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
<b>Twitter Bootstrap:</b> As you can see in previous examples, icheck-primary class used for styling. You can use following classes for Twitter Bootstrap color scheme:
<code>.icheck-default</code><br/> <code>.icheck-primary</code><br/> <code>.icheck-success</code><br/> <code>.icheck-info</code><br/> <code>.icheck-warning</code><br/> <code>.icheck-danger</code>
<b>Flat UI Colors:</b> Also you can use one of the really nice colors from flatuicolors.com
<code>.icheck-turquoise</code><br/> <code>.icheck-emerland</code><br/> <code>.icheck-peterriver</code><br/> <code>.icheck-amethyst</code><br/> <code>.icheck-wetasphalt</code><br/> <code>.icheck-greensea</code><br/> <code>.icheck-nephritis</code><br/> <code>.icheck-belizehole</code><br/> <code>.icheck-wisteria</code><br/> <code>.icheck-midnightblue</code><br/> <code>.icheck-sunflower</code><br/> <code>.icheck-carrot</code><br/> <code>.icheck-alizarin</code><br/> <code>.icheck-clouds</code><br/> <code>.icheck-concrete</code><br/> <code>.icheck-orange</code><br/> <code>.icheck-pumpkin</code><br/> <code>.icheck-pomegranate</code><br/> <code>.icheck-silver</code><br/> <code>.icheck-asbestos</code><br/>
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.