PHPackages                             kartik-v/bootstrap-checkbox-x - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. kartik-v/bootstrap-checkbox-x

ActiveLibrary[Utility & Helpers](/categories/utility)

kartik-v/bootstrap-checkbox-x
=============================

An extended checkbox plugin for bootstrap with three states and additional styles.

v1.5.7(4y ago)921.0M↓27%221BSD-3-ClauseJavaScript

Since Oct 5Pushed 4y ago8 watchersCompare

[ Source](https://github.com/kartik-v/bootstrap-checkbox-x)[ Packagist](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)[ Docs](https://github.com/kartik-v/bootstrap-checkbox-x)[ RSS](/packages/kartik-v-bootstrap-checkbox-x/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (15)Used By (1)

 [ ![Krajee Logo](https://camo.githubusercontent.com/4addfbb3869c3fc7d79befea4f06d9cf3655a686fb503df0da1d725859cfdef9/687474703a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f6b72616a65652d6c6f676f2d622e706e67) ](http://plugins.krajee.com "Krajee Plugins")
 bootstrap-checkbox-x ---

 [![Donate](https://camo.githubusercontent.com/0336bc43d88554a3f2d6c74dddf312bc2c65c2eacca70d83ae40f5567098d00e/68747470733a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f646f6e6174652e706e67)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU "Donate via Paypal") [![kartikv](https://camo.githubusercontent.com/0cf29a542375e1a46e84d8bf5805a4e5c0a6ee98b6547ccdc0c55eed49d99c69/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d79656c6c6f772e706e67)](https://www.buymeacoffee.com/kartikv "Buy me a coffee")
===========================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

[](#------------------------bootstrap-checkbox-x------------------)

[![Bower version](https://camo.githubusercontent.com/0d3906c5a7dc4ca11e6887a094fe7616c2630933ae1385e03b87271e74bae5c0/68747470733a2f2f62616467652e667572792e696f2f626f2f626f6f7473747261702d636865636b626f782d782e737667)](http://badge.fury.io/bo/bootstrap-checkbox-x)[![Latest Stable Version](https://camo.githubusercontent.com/40454e56eade769fc6299875629c2a37139d8f2eaeaee5d4128eb3b005877334/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d636865636b626f782d782f762f737461626c65)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)[![License](https://camo.githubusercontent.com/5476b2cdf939946e02971dd6771d43252eb64ed1aabe8f99cc9a976b25f084bd/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d636865636b626f782d782f6c6963656e7365)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)[![Packagist Downloads](https://camo.githubusercontent.com/08c2c81f45aa72cd97ae137db358a87c010b8090360173c3373bc4869daf5ebc/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d636865636b626f782d782f646f776e6c6f616473)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)[![Monthly Downloads](https://camo.githubusercontent.com/7ea6b900a27325c3b7624573957d73846210840fcfd0fe1aefa34510ebcbfed1/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d636865636b626f782d782f642f6d6f6e74686c79)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)

An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability.

With v1.5.5, the plugin now supports initializing widget on a SELECT input as well (other than a CHECKBOX or TEXT input).

> NOTE: The checkbox plugin stores the values by default as character format (and not boolean format) for checked and unchecked states. This can be overridden by setting `valueChecked`, `valueUnchecked` and `valueNull` properties.

Features
--------

[](#features)

1. Enhances any HTML input (preferrably a checkbox or text input) with `data-toggle=checkbox-x` to an extended checkbox control.
2. The plugin offers the following three states and values for the checkboxes:
    - `'1'`: Checkbox is checked. This value is configurable through `valueChecked` property.
    - `'0'`: Checkbox is unchecked. This value is configurable through `valueUnchecked` property.
    - `''`: Checkbox is indeterminate. This value is configurable through `valueNull` property.
3. You can set the plugin to allow **three states** or the default **two states** for the checkbox.
4. Specifically uses Bootstrap 5.x or 4.x or 3.x styles. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes.
5. Special CSS 3 styling, to enhance the control to look like any Bootstrap 3 form control. Supports the `has-error`, `has-success`, `has-warning`styling states like other Bootstrap form-controls.
6. Plugin CSS styling automatically defaults the checkboxes to inline display. You can also control the markup for block display like in checkbox lists.
7. You can add a `label` before or after with a `for` attribute and click on the label to change the checkbox values. Alternatively you can enclose the input within a `label` tag as well.
8. Ability to navigate to the checkbox controls via keyboard, and modify the values using the `space` bar on the keyboard.
9. Ability to size the checkbox control. Five prebuilt size templates are available `xl`, `lg`, `md`, `sm`, and `xs`.
10. Triggers JQuery events for advanced development. The plugin automatically triggers the `change` event for the input, whenever the checkbox value is changed via clicking. Events currently available are `change` and `checkbox.reset`.
11. Ability to access methods and refresh the input dynamically via javascript at runtime.
12. Disabled and readonly checkbox input support.
13. Allow third state to be configured (only on init) for two state checkboxes.
14. Added support for displaying native checkboxes with tristate capability. When displaying native checkboxes, the advanced styling offerred by the plugin will not be available.

> NOTE: The latest version of the plugin v1.5.7 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/CHANGE.md) for details.

Documentation and Demo
----------------------

[](#documentation-and-demo)

View the [plugin documentation](http://plugins.krajee.com/checkbox-x) and [plugin demos](http://plugins.krajee.com/checkbox-x/demo) at Krajee JQuery plugins.

Pre-requisites
--------------

[](#pre-requisites)

1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/)
2. Latest [JQuery](http://jquery.com/)
3. Most browsers supporting CSS3 & JQuery.

> NOTE: You can use the sass branch for installation using bootstrap-sass dependency. The master branch can be used for installation using the default official bootstrap dependency.

Installation
------------

[](#installation)

### Using Bower

[](#using-bower)

You can use the `bower` package manager to install. Run:

```
bower install bootstrap-checkbox-x

```

### Using Composer

[](#using-composer)

You can use the `composer` package manager to install. Either run:

```
$ php composer.phar require kartik-v/bootstrap-checkbox-x "@dev"

```

or add:

```
"kartik-v/bootstrap-checkbox-x": "@dev"

```

to your composer.json file

### Manual Install

[](#manual-install)

You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master) or [TAR ball](https://github.com/kartik-v/bootstrap-checkbox-x/tarball/master) and extract the plugin assets (css and js folders) into your project.

Usage
-----

[](#usage)

Step 1: Load the following assets in your header.

```

```

If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `checkbox-x.min.css` and `checkbox-x.min.js` for the plugin to work with default settings. Loading the theme file `theme-krajee-flatblue.min.css` is optional and is needed if you want to override the default theme. Read the `theme` property of the plugin for understanding configuration details for themes.

Step 2: Setup your input markup with `data-toggle="checkbox-x"` to automatically initialize the checkbox control

```

```

Step 3: You can also initialize the plugin on your page using javascript as well, instead of using `data-toggle` attribute as above. For example,

```

$(document).on("ready", function() {
    // initialize with defaults
    $("#input-id").checkboxX();

    // with plugin options
    $("#input-id").checkboxX({threeState: true, size:'lg'});
});

```

The `#input-id` is the identifier for the input on your page, which is hidden automatically by the plugin.

Alternatively, you can directly call the plugin options by setting data attributes to your input field.

> **Note:** You should wrap the input and label in a container with CSS class `cbx-krajee` for better alignment. You should also add the CSS class `cbx-label` to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (which includes additional enhancements for contextual colors).

License
-------

[](#license)

**bootstrap-checkbox-x** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.

###  Health Score

45

—

FairBetter than 93% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity54

Moderate usage in the ecosystem

Community17

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~211 days

Recently: every ~571 days

Total

13

Last Release

1702d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3592619?v=4)[Kartik Visweswaran](/maintainers/kartik-v)[@kartik-v](https://github.com/kartik-v)

---

Top Contributors

[![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (94 commits)")

---

Tags

jquerystatebootstrapcheckboxnullthreeindeterminate

### Embed Badge

![Health badge](/badges/kartik-v-bootstrap-checkbox-x/health.svg)

```
[![Health](https://phpackages.com/badges/kartik-v-bootstrap-checkbox-x/health.svg)](https://phpackages.com/packages/kartik-v-bootstrap-checkbox-x)
```

###  Alternatives

[kartik-v/yii2-checkbox-x

Extended checkbox widget for bootstrap with three states and additional styles.

26987.3k11](/packages/kartik-v-yii2-checkbox-x)[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k480.4k3](/packages/snapappointments-bootstrap-select)[wenzhixin/bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)

11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[onokumus/metismenu

A jQuery menu plugin

2.0k263.3k5](/packages/onokumus-metismenu)[techlab/smartwizard

The awesome jQuery step wizard plugin

79096.2k2](/packages/techlab-smartwizard)[kartik-v/bootstrap-popover-x

Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.

1143.4M3](/packages/kartik-v-bootstrap-popover-x)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)