Control Group

Introduction

A control group renders several distinct form controls as one unit, squaring the borders between them. It supports any number of buttons, text inputs, input groups, and HTML selects as direct children.

Examples

Usage

ControlGroup

import React from "react";
import { ControlGroup } from "@commure/components-foundation";
function MyControlGroup() {
return (
<ControlGroup style={{ flexGrow: 1 }} vertical={true}>
<Button icon="arrow-right" />
<InputGroup placeholder="pick an option" />
<div>
<Switch labelElement={<em>one</em>} />
<Switch labelElement={<em>two</em>} />
<Switch labelElement={<em>three</em>} />
</div>
</ControlGroup>
);
}
export default MyControlGroup;

API Reference

ControlGroup

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
fillfalsebooleanWhether the control group should take up the full width of its container.
verticalfalsebooleanWhether the control group should appear with vertical styling.

Related Reading

Blueprint Reference