Form Group


Form groups enable adding additional labels and helper text to aid with user navigation. They support complex form controls like

Control Group
Numeric Input


Text Input

We'll need your contact information to keep you updated.

File Input

Upload a picture so your teammates can recognize you!

Numeric Input


1import React from "react";
2import { FormGroup, InputGroup } from "@commure/components-foundation";
4function MyFormGroup() {
5 return (
6 <FormGroup
7 label="Enter your text here:"
8 labelFor="text"
9 labelInfo="(required)"
10 >
11 <InputGroup id="text" placeholder="Text here..." />
12 </FormGroup>
13 );
16export default MyFormGroup;

API Reference


Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
contentClassNamefalsestringA space-delimited list of class names to pass along to the `Classes.FORM_CONTENT` element that contains `children`.
disabledfalsebooleanWhether form group should appear as non-interactive. Remember that `input` elements must be disabled separately.
helperTextfalseReact.ReactNodeOptional helper text. The given content will be wrapped in `Classes.FORM_HELPER_TEXT` and displayed beneath `children`. Helper text color is determined by the `intent`.
inlinefalsebooleanWhether to render the label and children on a single line.
intentfalseIntentVisual intent color to apply to element.
labelfalseReact.ReactNodeLabel of this form group.
labelForfalsestring`id` attribute of the labelable form element that this `FormGroup` controls, used as `<label for>` attribute.
labelInfofalseReact.ReactNodeOptional secondary text that appears after the label.
stylefalseCSSPropertiesCSS properties to apply to the root element.

Related Reading

Blueprint Reference