PHPackages                             thatsus/radiosforbuttons - 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. thatsus/radiosforbuttons

ActiveLibrary

thatsus/radiosforbuttons
========================

v1.3.2(10y ago)064.4kHTML

Since Aug 19Pushed 10y agoCompare

[ Source](https://github.com/thatsus/radiosforbuttons)[ Packagist](https://packagist.org/packages/thatsus/radiosforbuttons)[ RSS](/packages/thatsus-radiosforbuttons/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)DependenciesVersions (9)Used By (0)

radiosforbuttons
================

[](#radiosforbuttons)

jQuery plugin for transforming radio-buttons in true beautiful Bootstrap buttons.

### [Demo](http://fiatjaf.github.com/radiosforbuttons/demo.html)

[](#demo)

### [Page](http://fiatjaf.github.com/radiosforbuttons/)

[](#page)

Requirements
------------

[](#requirements)

The requirements are

- [jQuery](https://developers.google.com/speed/libraries/devguide#jquery)
- [Bootstrap](http://twitter.github.com/bootstrap/) (but it really needs only the css for buttons, if you're not already using the entire framework at your project, get only the [bootstrap-buttons.min.css](https://raw.github.com/fiatjaf/radiosforbuttons/master/bootstrap-buttons.min.css) file)
- the *jquery.radioforbuttons.js* file, either [minified](https://raw.github.com/fiatjaf/radiosforbuttons/master/jquery.radiosforbuttons.min.js) or [not](https://raw.github.com/fiatjaf/radiosforbuttons/master/jquery.radiosforbuttons.js) (1.9k vs 2.9k).

Just include them all.

Usage
-----

[](#usage)

To use you must have a set of radio-buttons (defined by ``) with `name`, `value`, unique `ids` and a label (defined by ``) for each one. All these elements must be inside a `div` (or some other block element), which will be, by its time, called on the plugin invocation. The `div` can be anywhere inside a `form`. The `html` of the button will be the content of the label for each button. The radio-buttons will be preserved at the DOM, hidden, and their `checked` properties altered on each click at the resulting buttons. It is their value which will be sent to the server on any form submit. Simple example:

```

    this
    that

  $( '.default' ).radiosforbuttons()

```

### Group

[](#group)

Change the `group` option from the default `true` to `false` if you don't want the buttons to be in bootstrap button group (as in the `.btn-group` class).

### Vertical

[](#vertical)

If you want stacked options, just mark option `vertical` as true:

```
$('#radios_div').radiosforbuttons({ vertical: true })

```

The widths of the vertically stacked buttons will be equalized unless you set `autowidth` to `false`.

### Colors

[](#colors)

As you know, [bootstrap buttons](http://twitter.github.com/bootstrap/base-css.html#buttons) have colors. You can color the radio buttons in two ways:

#### Calling `radiosforbuttons` with the color or buttonstyle options setted

[](#calling-radiosforbuttons-with-the-color-or-buttonstyle-options-setted)

Just set the option you want to use with the value of the color you will want for all the buttons. Both the [bootstrap button classes names](http://twitter.github.com/bootstrap/base-css.html#buttons) or simply a color name:

```
$('#radios_div').radiosforbuttons({ color: 'black' })
$('#radios_div').radiosforbuttons({ buttonstyle: 'btn-inverse' })

```

#### Using `data` properties on the `input` element

[](#using-data-properties-on-the-input-element)

You can assign color to buttons using the `data` properties `button-color` or `button-bootstrap-class`, the values are the same for the example above:

```

```

### Margin

[](#margin)

Because of a difference of 2px (I think) on the button margins on Chrome and Firefox which bootstrap apparently doesn't cover, I added this property so you could make the buttons of the group nearer or farther. However, due to other improvement isn't necessary to change it, unless you want to make your buttons farther, then it's a cool thing. Just do:

```
$('#radios_div').radiosforbuttons({ margin: 4 })

```

It also works for vertically stacked buttons.

Reference
---------

[](#reference)

  option type default   group boolean true   color string white   buttonstyle string ''   vertical boolean false   autowidth boolean true   margin integer 0

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 91.7% 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 ~41 days

Recently: every ~60 days

Total

7

Last Release

3680d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/eb711bf9c5107c5de3104691c826c451390970e7f4500a66b9f384efadc7d351?d=identicon)[thatsus](/maintainers/thatsus)

![](https://www.gravatar.com/avatar/dc432bad0d4010ecab94ca498f4613e6bd7273668995565c15fd8a1cbcabf205?d=identicon)[rlambertsen](/maintainers/rlambertsen)

---

Top Contributors

[![thatsus-master](https://avatars.githubusercontent.com/u/16006839?v=4)](https://github.com/thatsus-master "thatsus-master (11 commits)")[![marshall-davis](https://avatars.githubusercontent.com/u/3332576?v=4)](https://github.com/marshall-davis "marshall-davis (1 commits)")

### Embed Badge

![Health badge](/badges/thatsus-radiosforbuttons/health.svg)

```
[![Health](https://phpackages.com/badges/thatsus-radiosforbuttons/health.svg)](https://phpackages.com/packages/thatsus-radiosforbuttons)
```

PHPackages © 2026

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