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);
};<GoabLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabLink>
<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>
<GoabFormItem
label="Provide details about your situation"
helpText="Include specific details to help us answer your question quickly.">
<GoabTextarea
name="program"
onChange={handleChange}
value={textValue}
maxCount={400}
countBy="character"
/>
</GoabFormItem>
</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">
<GoabButton type="primary" onClick={handleContinue}>
Continue
</GoabButton>
</GoabButtonGroup>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