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
Creates a label for the form item.
labelSize
GoabFormItemLabelSize
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
Marks the field with an optional or required label indicator.
testId
string
Sets a data-testid attribute for automated testing.
type
GoabFormItemType
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.
Ask a long answer question with a maximum word count
Ask a user for a birthday
Ask a user for dollar amounts
Disabled button with a required field
Dynamically add an item to a dropdown list
Dynamically change items in a dropdown list
Filter a list using a push drawer
Filter data in a table
Include a link in the helper text of an option
Include descriptions for items in a checkbox list
Reset date picker field
Reveal input based on a selection
Review and action
Select one or more from a list of options
Set a max width on a long radio item
Slotted error text in a form item
Slotted helper text in a form item
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.
