---
title: Radio Button Group
product: Form Library
description: If you want to allow a single-choice option in a question, a radio button group is a great way to go. Respondents are allowed to select only one button from the group. View a free demo for JavaScript.
framework: React
source: https://surveyjs.io/form-library/examples/single-select-radio-button-group/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Radio Button Group (React)

A radio button group allows respondents to select an answer from a set of options. This demo shows how to create and configure a radio button group form field in SurveyJS Form Library. Switch between available JavaScript frameworks to view a demo version for Angular, React, Vanilla JavaScript, jQuery, or Vue.

## Create a Radio Button Group Question

To create a radio group form field, define an object with the `type` property set to `"radiogroup"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/pagemodel#elements) array. Use the [`choices`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#choices) array to specify choice values. Each object in this array should have the following structure:

```js
{
  "value": any, // A unique value to be saved in the survey results.
  "text": string // A display text. When `text` is undefined, `value` is used as display text.
}
```

If you need to specify only the `value` property, you can set the `choices` property to an array of primitive values as shown in this demo. These values are both saved in survey results and used as display text.

You can also load choice values from a RESTful service. In this case, use the [`choicesByUrl`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#choicesByUrl) property instead of the `choices` array. Refer to the [ChoicesRestful](https://surveyjs.io/form-library/documentation/api-reference/choicesrestful) object for information on how to configure this property. The demo on this page defines local `choices`.

## Display Special Choices

Special choices are the "None" and "Other" options. "None" is used when none of the proposed options suit a respondent; "Other" allows respondents to enter their own option into a comment area.

To display the None and Other options, enable the [`showNoneItem`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#showNoneItem) and [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#showOtherItem) properties. You can also set the [`noneText`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#noneText) and [`otherText`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#otherText) properties to change the captions of the special choices. In this demo, you can show and hide the "Other" option and change its caption at runtime.

When respondents select "Other", the value they enter into the comment area is saved in a separate property. The property name is composed of the question [`name`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#name) and [`commentSuffix`](https://surveyjs.io/form-library/documentation/api-reference/surveymodel#commentSuffix). For example, if the question name is `"car"`, the survey result will be as follows:

```js
{
  "car": "other",
  "car-Comment": "Custom value"
}
```

If you want to use the question name as a key to store the comment value, disable the [`storeOthersAsComment`](https://surveyjs.io/form-library/documentation/api-reference/surveymodel#storeOthersAsComment) property in `SurveyModel`. In this case, you will get the following survey result:  

```js
{
  "car": "Custom value"
}
```

## Arrange and Sort Radio Buttons

You can arrange radio buttons in multiple columns. Assign the desired number of columns to the [`colCount`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#colCount) property. In this demo, you can select between 0, 1, 2, and 3 columns. When `colCount` is 0, radio buttons are arranged in a single line and wrapped to the next line if they do not fit.

Choices are sorted according to the `choices` array. If you want to sort them in ascending or descending alphabetical order, assign `"asc"` or `"desc"` to the [`choicesOrder`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#choicesOrder) property. Alternatively, you can set this property to `"random"`. In this case, choices are sorted in random order each time your survey is displayed. You can change the sort order at runtime in this demo.

Special choices ("None" and "Other") can be displayed on individual rows. Enable the [`separateSpecialChoices`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#separateSpecialChoices) property for this layout.

## Clear the Selected Value

Once respondents select a radio button, they can clear it only by selecting another radio button. If you want to display a Clear button that allows respondents to clear the selected value, enable the [`allowClear`](https://surveyjs.io/form-library/documentation/api-reference/questionradiogroupmodel#allowClear) property.

## See Also

[Conditionally Display Choice Options](/form-library/examples/how-to-conditionally-display-choice-options/ (linkStyle))

[Load Choices from Web Services](/form-library/examples/dropdown-menu-load-data-from-restful-service/ (linkStyle))

[Individual Choice Comments](/form-library/examples/individual-checkbox-comments/ (linkStyle))

[Nest Content Within Choice Options](/form-library/examples/nest-follow-up-questions-within-choice-options/ (linkStyle))

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "radiogroup",
      "name": "car",
      "title": "Which is the brand of your car?",
      "isRequired": true,
      "showNoneItem": true,
      "showOtherItem": true,
      "colCount": 2,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota" ],
      "separateSpecialChoices": true,
      "allowClear": true
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/single-select-radio-button-group/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/single-select-radio-button-group/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/single-select-radio-button-group/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/single-select-radio-button-group/vanillajs.md)