Back to all examples

Question page

ReactAngularWeb Components
const [answer, setAnswer] = useState("");

  const handleContinue = () => {
    console.log("Answer submitted:", answer);
  };
<GoabLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabLink>

      <GoabText as="h1" mt="xl" mb="m">What is your email address?</GoabText>
      <GoabText mt="none" mb="xl">We'll use this to send you confirmation of your application.</GoabText>

      <GoabFormItem label="Email address">
        <GoabInput
          name="email"
          type="email"
          value={answer}
          onChange={(e) => setAnswer(e.value)}
          width="100%"
        />
      </GoabFormItem>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary" onClick={handleContinue}>
          Continue
        </GoabButton>
      </GoabButtonGroup>
  );
}

A question page pattern that presents one question at a time to help users focus, reduce cognitive load, and navigate complex forms more easily.

When to use

Use this pattern when:

  • Building multi-step forms or wizards
  • Asking users for information that requires focused attention
  • The form has branching logic based on user responses
  • You want to reduce cognitive load and errors

Considerations

  • Each page should contain one idea: one question, one decision, or one piece of information
  • Progress indicators are optional - test without one first
  • The pattern helps with mobile responsiveness and accessibility
  • Enables automatic saving and better error handling
  • Consider adaptive questioning where subsequent questions depend on previous answers