Component documentation
SGUI / Development
All-at-once or sequential questions with optional Back navigation and host-owned responses.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {Survey, SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function SurveyExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [active, setActive] = useState("channel");
const [channel, setChannel] = useState<SurveyAnswer>(null);
const [notes, setNotes] = useState<SurveyAnswer>(null);
const [submitted, setSubmitted] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Survey title={"Communication preferences"} mode="one" allowBack={true} showProgress={true} currentQuestionId={active} onQuestionChange={setActive} onSubmit={() => setSubmitted(true)}>
<SurveyQuestion id="channel" prompt="How would you like to hear from us?" options={options} value={channel} onValueChange={value => {setChannel(value); setSubmitted(false);}} required={true} />
<SurveyQuestion id="notes" prompt="What would make this helpful?" kind="text" value={notes} onValueChange={value => {setNotes(value); setSubmitted(false);}} />
</Survey>
{submitted && <AnswerFeedback title="Response prepared">This local example does not send or save your answers.</AnswerFeedback>}
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {Survey, SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function SurveyExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [active, setActive] = useState("channel");
const [channel, setChannel] = useState<SurveyAnswer>(null);
const [notes, setNotes] = useState<SurveyAnswer>(null);
const [submitted, setSubmitted] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Survey title={"Communication preferences"} mode="all" allowBack={true} showProgress={true} currentQuestionId={active} onQuestionChange={setActive} onSubmit={() => setSubmitted(true)}>
<SurveyQuestion id="channel" prompt="How would you like to hear from us?" options={options} value={channel} onValueChange={value => {setChannel(value); setSubmitted(false);}} required={true} />
<SurveyQuestion id="notes" prompt="What would make this helpful?" kind="text" value={notes} onValueChange={value => {setNotes(value); setSubmitted(false);}} />
</Survey>
{submitted && <AnswerFeedback title="Response prepared">This local example does not send or save your answers.</AnswerFeedback>}
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {Survey, SurveyQuestion, AnswerFeedback, type SurveyAnswer} from '@structured-growth/sg-ui';
export default function SurveyExample() {
const options = [{"id":"text","label":"Text message"},{"id":"call","label":"Phone call"},{"id":"email","label":"Email"}];
const [active, setActive] = useState("channel");
const [channel, setChannel] = useState<SurveyAnswer>(null);
const [notes, setNotes] = useState<SurveyAnswer>(null);
const [submitted, setSubmitted] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Survey title={"Communication preferences"} mode="one" allowBack={false} showProgress={true} currentQuestionId={active} onQuestionChange={setActive} onSubmit={() => setSubmitted(true)}>
<SurveyQuestion id="channel" prompt="How would you like to hear from us?" options={options} value={channel} onValueChange={value => {setChannel(value); setSubmitted(false);}} required={true} />
<SurveyQuestion id="notes" prompt="What would make this helpful?" kind="text" value={notes} onValueChange={value => {setNotes(value); setSubmitted(false);}} />
</Survey>
{submitted && <AnswerFeedback title="Response prepared">This local example does not send or save your answers.</AnswerFeedback>}
</ThemeScope>
</>
);
}