Control group

A series of classes that help align, combine, and group elements together for UI components like button groups or segment controls.


npm install seed-control-group --save



Border, border-radius, and z-index properties are automatically adjusted for elements placed within an .o-contorl-group selector.

Button groups

Using the button component from seed-button.

<div class="o-control-group" role="group">
  <button class="c-button">Button</button>
  <button class="c-button">Button</button>
  <button class="c-button">Button</button>

Full-width items

In order for a particular element to have a (responsive) full-width, the class of .o-control-group__block must be applied.

Input / button combo

<div class="o-control-group" role="group">
  <input class="c-input o-control-group__block" value="I'm an input!" />
  <button class="c-button">Button!</button>

Input addons

Combining components from seed-input-addons and seed-input.

<div class="o-control-group" role="group">
  <div class="c-input-addon">$</div>
  <input class="c-input o-control-group__block" value="1,000,000,000">
  <div class="c-input-addon">.00</div>


Below are the default Sass configuration variables for seed-control-group. The variables can be found in the pack’s _config.scss file.

// Namespaces
$seed-control-group-namespace: "o-control-group" !default;
$seed-control-group-block-namespace: "#{$seed-control-group-namespace}__block" !default;