Last updated Nov 10, 2021

This section 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.

Radio and RadioGroup

To add Radio and RadioGroup components to your app:

import { Radio, RadioGroup } from "@forge/react";


A group of Radio buttons.



isRequiredboolean Indicates to the user whether or not a radio button is required to submit the form. If a field is required, an asterisk appears at the end of that field’s label. Defaults to false
labelstringYesThe label text to display.
namestringYesThe key to which the selected radio button is assigned in the returned form object.
descriptionstringThe text description of the radio group.
childrenArray<Radio>YesThe radio buttons in the group. Each Radio button is defined by a label that sets the radio button's text and return a value unique within the group if the radio button is selected. One can have a defaultChecked property set to true to be the selected on initial load.
onChange(value: string) => void | PromiseNoAn event handler that can be asynchronous. Allows you to read values from the component without having to submit as part of a Form.


defaultCheckedbooleanWhether this radio button is initially selected. Defaults to false
labelstringYesThe label text to display.
valuestringYesThe value of the property when submitted. Empty if not selected.


const App = () => {
  return (
      label="Pick a flavor"
      description="Add a flavor to your recipe"
      <Radio defaultChecked label="Strawberry" value="strawberry" />
      <Radio label="Cinnamon" value="cinnamon" />
      <Radio label="Chocolate" value="chocolate" />

In the form data, if the option was selected:

  //... other form values
  flavor: "strawberry";


Example image of rendered radio group

Rate this page: