Back to all examples

Give context before asking a long answer question

ReactAngularWeb Components
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 maxCount and countBy props
  • Keep instructions focused on what will help process their request