Survey.StylesManager.applyTheme("defaultV2");
var json = {
"elements": [
{
"type": "radiogroup",
"name": "car",
"title": "What car are you driving?",
"isRequired": true,
"hasNone": true,
"colCount": 4,
"choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Radiogroup, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
// The classic way to set the property. The result values are numbers: 1 and 2
choices: [{ value: 1, text: "Value 1" }, { value: 2, text: "Value 2" }]
// The values are: 1 and 'Value 2' and texts are '1' and 'Value 2'
choices: [{ value: 1 }, { value: "Value 2" }]
// The values and texts are same
choices: ["Value 1", "Value 2"]
// The values are '1' and '2' and texts are 'Value 1' and 'Value 2'
choices: ["1|Value 1", "2|Value 2"]
Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.
We'd really appreciate your feedback.
Approximate time to complete: 2 min.
Start the survey