Range

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.

Toggle

To add the Toggle component to your app:

1
2
import { Toggle } from "@forge/react";

Description

A toggle for viewing or switching between enabled or disabled states.

Props

Name	Type	Required	Description
`label`	`string`	Yes	The label text to display.
`name`	`string`	Yes	The key the input value is assigned to in the form object returned.
`defaultChecked`	`boolean`		Whether the toggle is initially checked. Defaults to `false`
`onChange`	`(value: 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 (
    <Toggle
      label="Show section"
      name="isSectionVisible"
      onChange={(value) => console.log(value)}
    />
  );
};

Output

Example image of rendered toggle