Question page
Form item
Wraps an input control with a text label, requirement label, helper text, and error text.
Props
error
string | React.ReactNode
Error text displayed under the form field. Leave blank to indicate a valid field. Accepts a string or ReactNode for custom error content.
helpText
string | React.ReactNode
Help text displayed under the form field to provide additional explanation. Accepts a string or ReactNode for custom help content.
id
string
Sets the id attribute on the form item element.
label
string | React.ReactNode
Creates a label for the form item. HTML content must be phrasing content, such as span, strong, or em elements.
labelSize
GoabFormItemLabelSize compact | regular | large
Sets the label size. 'regular' for standard, 'large' for emphasis.
Defaults to
regular.
maxWidth
string
Sets the maximum width of the form item.
Defaults to
none.
name
string
Overrides the label value within the form-summary to provide a shorter description. For public-form use only.
requirement
GoabFormItemRequirement optional | required
Marks the field with an optional or required label indicator.
testId
string
Sets a data-testid attribute for automated testing.
type
GoabFormItemType text-input | textarea | checkbox-list | radio-group
Specifies the input type for appropriate message spacing. Used with checkbox-list or radio-group.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
ReactNode
error
ReactNode
Error text displayed under the form field. Leave blank to indicate a valid field. Accepts a string or ReactNode for custom error content.
helpText
ReactNode
Help text displayed under the form field to provide additional explanation. Accepts a string or ReactNode for custom help content.
label
ReactNode
Creates a label for the form item. HTML content must be phrasing content, such as span, strong, or em elements.
Other
The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.
Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
Sizing
Tip
Use labelSize='large' when you want the question to act as the heading on the page. This is often the right choice when there's only one question on a page, so you don't end up with a separate heading and a question saying the same thing.
Forms
Don't
Don't use the character counter for input fields where user entries typically have standard or predictable lengths.
Do
Use the character count only when there's a valid reason to limit the number of characters.
Do
Make empty text areas as tall as the content they are expected to contain.
Do
Ensure that the text area width is no longer than 75 characters per line; ideal line length is 45-75 characters.
Don't
Don't use a text area which is only one line high; instead, use text input if just one line is needed.
Do
If you suggest a specific length for an answer to a question, display a word count to help guide the user.
