PHPackages                             prokki/twbs-toggle-buttons - 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. prokki/twbs-toggle-buttons

ActiveLibrary

prokki/twbs-toggle-buttons
==========================

A small javascript snippet to use Bootstrap Button Groups (https://getbootstrap.com/components/button-group/) for toggle buttons.

0.0.3(6y ago)7194MITJavaScriptPHP >=5.4

Since May 8Pushed 6y ago1 watchersCompare

[ Source](https://github.com/prokki/twbs-toggle-buttons)[ Packagist](https://packagist.org/packages/prokki/twbs-toggle-buttons)[ Docs](https://github.com/prokki/twbs-toggle-buttons)[ RSS](/packages/prokki-twbs-toggle-buttons/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (6)Used By (0)

Twitter Bootstrap Toggle Buttons
--------------------------------

[](#twitter-bootstrap-toggle-buttons)

[![License](https://camo.githubusercontent.com/92382c6ad0c3d0916fc2f36b521cf93b782d7c6ebaef07427b6d3b0bfcdabfca/68747470733a2f2f706f7365722e707567782e6f72672f70726f6b6b692f747762732d746f67676c652d627574746f6e732f6c6963656e7365)](https://packagist.org/packages/prokki/twbs-toggle-buttons)[![Latest Stable Version](https://camo.githubusercontent.com/6e45c4c39ba676da50e5299e389673e346139aa266a1a06fad59c93b4cba884d/68747470733a2f2f706f7365722e707567782e6f72672f70726f6b6b692f747762732d746f67676c652d627574746f6e732f762f737461626c65)](https://packagist.org/packages/prokki/twbs-toggle-buttons)[![https://jquery.com/](https://camo.githubusercontent.com/8dd04e260e41bb1ce893f80e8ecb2811cc0136dd1c246465de395d7a55a2445b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a51756572792d254532253839254135332d7265642e7376673f7374796c653d666c6174)](https://jquery.com/)[![https://getbootstrap.com/docs/4.3/](https://camo.githubusercontent.com/7e8506f5bd428eb6650d6d80a51d7e6197fab64a72f7ef0b212bd4800495e84e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f426f6f7473747261702d254532253839254135342d7265642e7376673f7374796c653d666c6174)](https://getbootstrap.com/)

This is a small javascript snippet extending the [Bootstrap Button Groups](https://getbootstrap.com/docs/4.3/components/button-group/) to use the toggle buttons as radio buttons or checkboxes.

Have a look at [jsfiddle](https://jsfiddle.net/prokki/tccew78a/).

### Table of Contents

[](#table-of-contents)

- [Integrations](#integrations)
- [The Basics](#the-basics)
- [Options](#options)
    - [twbsBtnSelector](#twbsbtnselector)
    - [classActive](#classactive)
    - [classInctive](#classinactive)
- [Events](#events)
    - [Click Event](#click-event)
    - [twbsToggleButtons:activate Event](#twbstogglebuttonsactivate-event)
- [Tricks and Tips](#tricks-and-tips)
    - [Checkboxes or Radio Buttons](#checkboxes-or-radio-buttons)
    - [Required Radio Group](#required-radio-group)
    - [Overwrite classActive](#overwrite-classactive)

### Integrations

[](#integrations)

Download the code from GitHub and copy the dist directory to your project.

Include the following lines of code in the `` section of your HTML.

```

```

### The Basics

[](#the-basics)

```
Is it true?

        yes 1

        yes 2

        no

    $(".btn-group-toggle").twbsToggleButtons();

```

### Options

[](#options)

#### twbsBtnSelector

[](#twbsbtnselector)

> default: `'[role="button"]'`

The default selector of all buttons is `[role="button"]`. To avoid this special html attribute you can change the option `twbsBtnSelector`, for instance to a class.

```
Is it true?

    yes
    no

    $(".btn-group-toggle").twbsToggleButtons({
        twbsBtnSelector: ".btn"
    });

```

#### classActive

[](#classactive)

> default: `'btn-success'`

To detect an optical difference between active and inactive toggle buttons the two options `classActive` and `classInactive` are set to default bootstrap classes. Change the options and use other classes to make a difference between both toggle states.

Hint: Use an array of classes to set multiple classes.

```
$(".btn-group-toggle").twbsToggleButtons({
    classActive: "my-active-button",
    classInactive: ["my-inactive-button-1", "my-inactive-button-2"]
});
```

#### classInactive

[](#classinactive)

> default: `'btn-secondary'`

See [classActive](#classActive)

### Events

[](#events)

To avoid problems with the order of executing click events on the twbs-toggle-buttons you can use two event types to handle events.

#### Click Event

[](#click-event)

The `click` event is fired on the button.

**❗ Be careful to get the right state of the button!** To get the state after button toggling use event [twbsToggleButtons:activate Event](#twbstogglebuttonsactivate-event).

```
$(".btn-group-toggle").find("[role='button']").on("click", function (e)
{
    console.log(e);
});
```

#### twbsToggleButtons:activate Event

[](#twbstogglebuttonsactivate-event)

This event is fired after the state of the button getting activated was changed.

```
$(".btn-group-toggle").find("[role='button']").on("twbsToggleButtons:activate", function (e)
{
    console.log(e);
});
```

### Tricks and Tips

[](#tricks-and-tips)

#### Checkboxes or Radio Buttons

[](#checkboxes-or-radio-buttons)

```
Choose your documents!

        Document 1

        Document 2

        Document 3

```

#### Required Radio Group

[](#required-radio-group)

If radio buttons are used, usually exactly one button must be active.

To allow a button group without any active button, dismiss the attribute `required` in the input fields.

#### Overwrite classActive

[](#overwrite-classactive)

Sometimes it is useful to change the active class of single toggle button. To do so, add the tml data attribute `data-twbs-toggle-buttons-class-active`with a corresponding class.

```
Is it true?

        yes

        no

```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 95.2% 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 ~206 days

Total

5

Last Release

2461d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/53d7b96b1c455fca0c2900a162ddfe96df516c81f20db1847d88be9f0345e425?d=identicon)[prokki](/maintainers/prokki)

---

Top Contributors

[![prokki](https://avatars.githubusercontent.com/u/5040666?v=4)](https://github.com/prokki "prokki (40 commits)")[![singsa](https://avatars.githubusercontent.com/u/51349059?v=4)](https://github.com/singsa "singsa (2 commits)")

---

Tags

bootstrapcheckboxeshtmljavascriptjqueryradio-buttonsradiogrouptoggle-buttonsbootstrapcheckboxradio

### Embed Badge

![Health badge](/badges/prokki-twbs-toggle-buttons/health.svg)

```
[![Health](https://phpackages.com/badges/prokki-twbs-toggle-buttons/health.svg)](https://phpackages.com/packages/prokki-twbs-toggle-buttons)
```

###  Alternatives

[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)[kartik-v/bootstrap-checkbox-x

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

921.0M1](/packages/kartik-v-bootstrap-checkbox-x)[kartik-v/yii2-checkbox-x

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

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

A checkbox component based on Bootstrap framework

2139.0k3](/packages/vsn4ik-bootstrap-checkbox)[eddiriarte/console-select

A fancy selection interface for symfony's console component.

117.2k2](/packages/eddiriarte-console-select)

PHPackages © 2026

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