Fetching latest commit…
Cannot retrieve the latest commit at this time.


With the buttons directive, we can make a group of buttons behave like a set of checkboxes (uib-btn-checkbox) or behave like a set of radio buttons (uib-btn-radio).

uib-btn-checkbox settings

  • btn-checkbox-false (Default: false) - Sets the value for the unchecked status.

  • btn-checkbox-true (Default: true) - Sets the value for the checked status.

  • ng-model $ - Model where we set the checkbox status. By default true or false.

uib-btn-radio settings

  • ng-model $ - Model where we set the radio status. All radio buttons in a group should use the same ng-model.

  • uib-btn-radio - $ Value to assign to the ng-model if we check this radio button.

  • uib-uncheckable $ (Default: null) - An expression that evaluates to a truthy or falsy value that determines whether the uncheckable attribute is present.

  • uncheckable B - Whether a radio button can be unchecked or not.

Additional settings uibButtonConfig

  • activeClass (Default: active) - Class to apply to the checked buttons.

  • toggleEvent (Default: click) - Event used to toggle the buttons.

Known issues

To use tooltips or popovers on elements within a btn-group, set the tooltip/popover appendToBody option to true. This is due to Bootstrap CSS styling. See here for more information.