Question page
Input
A single-line field where users can input and edit text.
Props
name
string
Name of input value that is received in event detail payloads.
ariaLabel
string
Sets the aria-label used by assistive technologies.
autoCapitalize
GoabAutoCapitalize
Controls automatic capitalization behavior on supported mobile browsers.
autoComplete
string
Sets the autocomplete attribute for the input element.
debounce
number
Debounce delay in milliseconds before firing the change event. 0 means no debounce.
disabled
boolean
Sets the input disabled state.
error
boolean
Sets the error state styling.
focused
boolean
Sets focus on initial render or controlled updates.
id
string
Sets the id attribute of the input element.
leadingIcon
GoabIconType
Sets the icon shown before the value.
max
number | string
Maximum value. Supports any number, or ISO 8601 format for date/datetime types.
maxLength
number
Sets the maximum number of characters.
min
number | string
Minimum value. Supports any number, or ISO 8601 format for date/datetime types.
placeholder
string
Sets placeholder text when the input is empty.
readonly
boolean
Sets the readonly state.
size
GoabInputSize
Sets the input size.
Defaults to
default.
step
number
How much a number or date value should change by.
Defaults to
1.
testId
string
Sets a data-testid attribute for automated testing.
textAlign
"left" | "right"
Sets text alignment.
Defaults to
left.
trailingIcon
GoabIconType
Sets the icon shown after the value.
trailingIconAriaLabel
string
Sets the aria-label for an interactive trailing icon.
type
GoabInputType
Sets the type of the input field.
Defaults to
text.
value
string
Bound to the current value of the input field.
variant
"goa" | "bare"
Sets the visual style variant.
Defaults to
goa.
width
string
Sets the width of the input field.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onBlur
(detail: GoabInputOnBlurDetail) => void
Callback fired when the input loses focus. Receives GoabInputOnBlurDetail.
onChange
(detail: GoabInputOnChangeDetail) => void
Callback fired when the input value changes. Receives GoabInputOnChangeDetail.
onFocus
(detail: GoabInputOnFocusDetail) => void
Callback fired when the input receives focus. Receives GoabInputOnFocusDetail.
onKeyPress
(detail: GoabInputOnKeyPressDetail) => void
Callback fired when a key is pressed in the input. Receives GoabInputOnKeyPressDetail.
onTrailingIconClick
() => void
Callback fired when the trailing icon is clicked.
ReactNode
leadingContent
ReactNode
Sets content in the leading slot.
trailingContent
ReactNode
Sets content in the trailing slot.
Ask a user for dollar amounts
Disabled button with a required field
Dynamically add an item to a dropdown list
Filter data in a table
Reveal input based on a selection
Slotted error text in a form item
Slotted helper text in a form item
States
When you must disable a button or input:
- Provide nearby text explaining what needs to happen first
- Consider showing the element enabled with validation on submit instead
- Use aria-describedby to link the disabled element to explanatory text
Don't
Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.
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.
Types
Do
Use the appropriate input type for your context to give a better experience.
Do
Use a text area to input content longer than a single line, such as descriptions, comments, or feedback.
Content
Placeholder text disappears when users start typing, leaving them without context for what the field is asking for.
Always use a visible label above or beside the input field. Placeholder text can provide an example of the expected format, but should never be the only indication of what information is needed.
Don't
Don't use placeholder text as a label
Sizing
Known input length: Use fixed-width inputs for content with a specific length, such as postal code (7 characters) or year (4 characters).
Unknown input length: If you don’t know how many characters the user will need (like their name), make your text input 100% of the container.
Do
Size text inputs based on the expected content length to help users understand what information is needed.
Forms
Don't
Don't use a text area which is only one line high; instead, use text input if just one line is needed.
Capture text input from users in forms.
When to use
Use Input when you need users to enter:
- Short text answers (names, email addresses)
- Numbers (phone numbers, quantities)
- Dates and times
- Search queries
When not to use
Don’t use Input when:
- Users need to enter multiple lines of text (use Textarea)
- Users need to select from predefined options (use Dropdown or Radio)
- The input requires complex formatting (consider specialized components)
Types
Input supports multiple HTML input types:
- text - General text entry (default)
- email - Email addresses with validation
- password - Masked password entry
- number - Numeric values with stepper
- date - Date picker
- tel - Phone numbers
- search - Search with clear button
States
- Default - Normal interactive state
- Focused - When the input has keyboard focus
- Error - When validation fails
- Disabled - When input is not available
- Read-only - When showing value without editing
