Ask a long answer question with a maximum word count

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

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

form!: FormGroup;

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

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

View old example docs