Form Group

Introduction

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

Control Group
or
Numeric Input
.

Examples

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

Usage

import React from "react";
import { FormGroup, InputGroup } from "@commure/components-foundation";
function MyFormGroup() {
return (
<FormGroup
label="Enter your text here:"
labelFor="text"
labelInfo="(required)"
>
<InputGroup id="text" placeholder="Text here..."/>
</FormGroup>
);
}
export default MyFormGroup;

API Reference

FormGroup

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