Radio group

Introduction

Radio group is used to define a collection of radio buttons that allow users to select one option from a list of choices. It is particularly helpful when there are multiple options available, but only one option should be selected at a time. Thus, each defined radio button represents a specific option, and only one option can be selected at a time.

The radio group component is based on RadioGroup. It is included within the following NPM package: @react-form-builder/components-rsuite.

This component can be customized to include a range of custom choices and also to change the appearance of the radio group by using various properties that are presented and described below.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Name	string	Sets the name for the component
Appearance	choice	Select either default or picker appearance for the radio group
Label	string	Text that is displayed for the radio group component
Disabled	boolean	Disables the component
Read Only	boolean	If set to true, makes your component unavailable for users to interact with
Items	string	Used to define values and labels for your radio group. Add more options by using the corresponding (+) button
Value	string	Sets default value for the component

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color