Ask a long answer question with a maximum word count

const [value, setValue] = useState("");

<GoabxFormItem
      label="Provide more detail"
      helpText="Maximum 500 words. Do not include personal or financial information."
    >
      <GoabxTextArea
        name="program"
        onChange={(e) => setValue(e.value)}
        value={value}
        width="100%"
        rows={6}
        maxCount={500}
        countBy="word"
      />
    </GoabxFormItem>

form!: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      program: [""],
    });
  }

<goabx-form-item
  label="Provide more detail"
  helpText="Maximum 500 words. Do not include personal or financial information.">
  <goabx-textarea
    name="program"
    [formControl]="form.controls.program"
    width="100%"
    [rows]="6"
    [maxCount]="500"
    countBy="word">
  </goabx-textarea>
</goabx-form-item>

document.getElementById("program-textarea")?.addEventListener("_change", (e) => {
  console.log("Value:", e.detail.value);
});

<goa-form-item version="2"
  label="Provide more detail"
  helptext="Maximum 500 words. Do not include personal or financial information.">
  <goa-textarea version="2"
    name="program"
    id="program-textarea"
    width="100%"
    rows="6"
    maxcount="500"
    countby="word">
  </goa-textarea>
</goa-form-item>

Restrict a long answer input to a maximum number of words or characters.

When to use

Use this pattern when:

Collecting open-ended responses
You need to limit response length
Users benefit from seeing remaining word count

Considerations

Choose between word count or character count based on the use case
Provide clear guidance on expected response length
Show remaining count to help users gauge their response