Radio and Radio Group

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:

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

Description

A group of Radio buttons.

Props

RadioGroup

Name	Type	Required	Description
`isRequired`	`boolean`		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`
`label`	`string`	Yes	The label text to display.
`name`	`string`	Yes	The key to which the selected radio button is assigned in the returned form object.
`description`	`string`		The text description of the radio group.
`children`	`Array<Radio>`	Yes	The 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 \| 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`.

Radio

Name	Type	Required	Description
`defaultChecked`	`boolean`		Whether this radio button is initially selected. Defaults to `false`
`label`	`string`	Yes	The label text to display.
`value`	`string`	Yes	The value of the property when submitted. Empty if not selected.

Example

1
2
const App = () => {
  return (
    <RadioGroup
      name="flavor"
      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" />
    </RadioGroup>
  );
};

In the form data, if the option was selected:

1
2
{
  //... other form values
  flavor: "strawberry";
}

Output

Example image of rendered radio group