Checkbox & Checkbox Group

This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Checkbox and CheckboxGroup

To add Checkbox and CheckboxGroup components to your app:

1
2
import { Checkbox, CheckboxGroup } from "@forge/react";

Description

A logical group of Checkbox components.

Props

CheckboxGroup

Name	Type	Required	Description
`children`	`Array<Checkbox>`	Yes	An array of checkbox components in this group.
`label`	`string`	Yes	The label text that describes the checkbox group.
`name`	`string`	Yes	The name of the property when submitted.
`description`	`string`		The text description of the checkbox group.

Checkbox

Name	Type	Required	Description
`defaultChecked`	`boolean`		Whether the checkbox is initially checked. Defaults to `false`
`isRequired`	`boolean`		Indicates to the user whether or not a `Checkbox` must be selected to submit the form. If a field is required, an asterisk appears at the end of that field’s label.
`label`	`string`	Yes	The label text.
`value`	`string`	Yes	The value of the property when submitted. Empty if not selected.
`onChange`	`({ value: string, isChecked: boolean }) => void \| Promise`	No	An event handler that can be asynchronous. Allows you to read values from the component without having to submit as part of a `Form`.

Example

1
2
const App = () => {
  return (
    <CheckboxGroup label="Products" name="products">
      <Checkbox value="jira" label="Jira" />
      <Checkbox
        value="confluence"
        label="Confluence"
        onChange={({ value, isChecked }) => console.log(value, isChecked)}
      />
    </CheckboxGroup>
  );
};

Selected values are sent as an array. If the user selects “Jira”, it is passed to onSubmit of the surrounding Form:

1
2
{
  // ...other form data
  products: ["jira"];
}

Output

Example image of rendered checkbox group