Skip Navigation
React Magma

Form Group

FormGroup components wrap controls such as the Checkbox and Toggle components. For Radio Buttons, you should use the Radio Group component.

Basic Usage

Form groups are not necessary when displaying only a single checkbox or toggle. However, if more than one checkbox or toggle fit together to answer a single question, form groups should be used to make that association, both visually and for users of assistive technology.

The label/group association will be handled via the passed in id if one is supplied or via an auto-generated id if not supplied.

import React from 'react';


import { FormGroup, Checkbox, Toggle } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <FormGroup labelText="Choose one or more colors">
        <Checkbox labelText="Red" />
        <Checkbox labelText="Blue" />
        <Checkbox labelText="Purple" />
      </FormGroup>
      <br />
      <FormGroup
        id="myCustomId"
        labelText="Turn on notifications for the following"
      >
        <Toggle labelText="Product updates" />
        <Toggle labelText="Promotions and sales" />
      </FormGroup>
    </>
  );
}

Labeling Form Groups

To meet accessibility requirements, a form group must have a label. You can provide a label in one of two ways.

You can use the labelText prop, which takes a string or a React Node. This will be displayed on screen inside a <label> element and be associated with your form group.

Or you can use the labelledById prop, which also takes a string. This string should refer to an ID of an element that exists somewhere else on the page. This id will become the value of the aria-labelledby attribute for the group.

import React from 'react';


import { FormGroup, Checkbox, Heading } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <FormGroup
        labelText={
          <>
            Labelled by <i>label</i>
          </>
        }
      >
        <Checkbox labelText="Label" />
        <Checkbox labelText="Label" />
      </FormGroup>
      <FormGroup labelledById="h3Label">
        <Heading id="h3Label" level={3}>
          Labelled by H3
        </Heading>
        <Checkbox labelText="Label" />
        <Checkbox labelText="Label" />
      </FormGroup>
    </>
  );
}

Custom Styles

Custom styles can be applied by using the containerStyle and labelStyle props.

import React from 'react';


import { FormGroup, Checkbox } from 'react-magma-dom';


export function Example() {
  return (
    <FormGroup
      containerStyle={{ border: '1px solid gray', padding: '10px' }}
      labelStyle={{ fontWeight: '500', color: 'red' }}
      labelText="Group label"
    >
      <Checkbox labelText="Checkbox label" />
      <Checkbox labelText="Checkbox label" />
    </FormGroup>
  );
}

Visually Hidden Label

The label text for the form group can be hidden visually, but still be read by assistive technology, by using the isTextVisuallyHidden prop.

import React from 'react';


import { FormGroup, Checkbox } from 'react-magma-dom';


export function Example() {
  return (
    <FormGroup labelText="Group Label" isTextVisuallyHidden>
      <Checkbox labelText="Checkbox label" />
      <Checkbox labelText="Checkbox label" />
    </FormGroup>
  );
}

Inverse

import React from 'react';


import { FormGroup, Checkbox, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <FormGroup labelText="Choose one or more colors" isInverse>
          <Checkbox labelText="Red" isInverse />
          <Checkbox labelText="Blue" isInverse />
          <Checkbox labelText="Purple" isInverse />
        </FormGroup>
      </CardBody>
    </Card>
  );
}

Form Group Props

This component uses forwardRef. The ref is applied to the Form Group div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

containerStyle

Description

Style properties for the component container element

Type

CSSProperties

Default

-

errorMessage

Description

Content of the error message. If a value is provided, the form fields will be styled to show an error state

Type

React.ReactNode

Default

-

helperMessage

Description

Content of the helper message

Type

React.ReactNode

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

isTextVisuallyHidden

Description

If true, label text for the form group will be hidden visually, but will still be read by assistive technology

Type

boolean

Default

false

labelStyle

Description

Style properties for the label of the form group

Type

CSSProperties

Default

-

labelText

Description

Content of label for form group; can be a node or a string. Alternatively, the labelledById prop can be used

Type

React.ReactNode

Default

-

labelledById

Description

ID of the element that labels the form group, used in the aria-labelledby attribute for the group. Alternatively, the labelText prop can be used

Type

string

Default

-

On this page

Deploys by Netlify