SGUI / Development
SurveyQuestion
Question shells with choice, text, rating or custom answers and optional feedback.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Question shells with choice, text, rating or custom answers and optional feedback.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import {SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function QuestionExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [answer, setAnswer] = useState<SurveyAnswer>(null);
return (
<>
<SurveyQuestion id="preference" prompt={"Which channel works for you?"} kind="single" options={options} value={answer} onValueChange={setAnswer} required={false} readOnly={false} />
</>
);
}
'use client';
import { useState } from 'react';
import {SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function QuestionExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [answer, setAnswer] = useState<SurveyAnswer>(null);
return (
<>
<SurveyQuestion id="preference" prompt={"Which channel works for you?"} kind="multiple" options={options} value={answer} onValueChange={setAnswer} required={false} readOnly={false} />
</>
);
}
'use client';
import { useState } from 'react';
import {SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function QuestionExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [answer, setAnswer] = useState<SurveyAnswer>(null);
return (
<>
<SurveyQuestion id="preference" prompt={"Which channel works for you?"} kind="text" options={options} value={answer} onValueChange={setAnswer} required={false} readOnly={false} />
</>
);
}
'use client';
import { useState } from 'react';
import {SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function QuestionExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [answer, setAnswer] = useState<SurveyAnswer>(null);
return (
<>
<SurveyQuestion id="preference" prompt={"Which channel works for you?"} kind="rating" options={options} value={answer} onValueChange={setAnswer} required={false} readOnly={false} />
</>
);
}