Give context before asking a long answer question
const [textValue, setTextValue] = useState("");
const handleChange = (event: GoabTextAreaOnChangeDetail) => {
setTextValue(event.value);
};
const handleContinue = () => {
console.log("Submitted:", textValue);
};<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h2" mt="xl" mb="m">Submit a question about your benefits</GoabText>
<GoabText mt="none" mb="xl">
If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
question here.
</GoabText>
<form>
<GoabxFormItem
label="Provide details about your situation"
helpText="Include specific details to help us answer your question quickly.">
<GoabxTextArea
name="program"
onChange={handleChange}
value={textValue}
maxCount={400}
countBy="character"
/>
</GoabxFormItem>
</form>
<GoabDetails mt="m" heading="What kind of information is useful?">
<p>
Include your benefit program name, mention any recent correspondence you received and/or provide any
relevant case or reference numbers.
</p>
</GoabDetails>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabxButton type="primary" onClick={handleContinue}>
Continue
</GoabxButton>
</GoabButtonGroup>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
program: [""]
});
}
onContinue(): void {
console.log("Submitted:", this.form.get("program")?.value);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goab-text>
<goab-text mt="none" mb="xl">
If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
question here.
</goab-text>
<form [formGroup]="form">
<goabx-form-item
label="Provide details about your situation"
helpText="Include specific details to help us answer your question quickly.">
<goabx-textarea
formControlName="program"
name="program"
[maxCount]="400"
countBy="character">
</goabx-textarea>
</goabx-form-item>
</form>
<goab-details mt="m" heading="What kind of information is useful?">
<p>
Include your benefit program name, mention any recent correspondence you received and/or provide any
relevant case or reference numbers.
</p>
</goab-details>
<goab-button-group alignment="start" mt="2xl">
<goabx-button type="primary" (onClick)="onContinue()">
Continue
</goabx-button>
</goab-button-group>const textarea = document.getElementById('program-textarea');
const continueBtn = document.getElementById('continue-btn');
continueBtn.addEventListener('_click', () => {
console.log('Submitted:', textarea.value);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goa-text>
<goa-text mt="none" mb="xl">
If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
question here.
</goa-text>
<form>
<goa-form-item version="2"
label="Provide details about your situation"
helptext="Include specific details to help us answer your question quickly.">
<goa-textarea version="2"
id="program-textarea"
name="program"
maxcount="400"
countby="character">
</goa-textarea>
</goa-form-item>
</form>
<goa-details mt="m" heading="What kind of information is useful?">
<p>
Include your benefit program name, mention any recent correspondence you received and/or provide any
relevant case or reference numbers.
</p>
</goa-details>
<goa-button-group alignment="start" mt="2xl">
<goa-button version="2" id="continue-btn" type="primary">
Continue
</goa-button>
</goa-button-group>Provide context and guidance before a long-answer text field to help users provide relevant information.
When to use
Use this pattern when:
- Asking open-ended questions that require detailed responses
- Users may not know what information is most helpful to provide
- You want to encourage more useful and complete answers
- Building citizen-facing forms with benefit inquiries or support requests
Considerations
- Explain the purpose of the question briefly
- Use a Details component to provide additional guidance without cluttering the form
- Set appropriate character limits with
maxCountandcountByprops - Keep instructions focused on what will help process their request