<InputText /> component renders a single text input element on the page, with no accompanying label. It is generally used to construct higher-order components like the
<FieldText />. If you are building a form, you probably want to use
<FieldText /> instead as it provides label and validation support.
Before & After
iconAfter to render an icon before or after the input.
For more custom content,
after accept a React node. A string is passed to
after will have formatting applied, while JSX will be rendered as-is.
after are passed, a warning will appear in the console and the
InputText will not render.
autoResize to allow the width of the component to adjust to the current value or placeholder.
Name and ID
A name and ID can be specified in the
<InputText /> component. Names are important if the input is used in the context of a form, in which case a name is required for the value of the input to be captured.
Use the disable property to make an input field un-editable.
Placeholders are used to give a hint to the user of the expected value for the input. They should not be used as a complete replacement of labels.
As the name suggests,
readOnly makes the text un-editable.
When set for
<InputText /> in the context of a form, the input field must be filled out before submitting the form.
- Placeholders are not a substitute for labels.
- Use the correct input type for the required data to get more accessible fields for free.
- See related ARIA attributes
- Always use the
<input>element with the proper
typeattribute for the content, e.g.
<input type="text">for text content and
<input type"=number">for numbers.
- Always include an unique id on the
<input>element so it can be referenced by a label
<input type="text" id="first-name">
- Fields that are required must have the
<input type="text" id="first-name" required>
- Use clear and descriptive labels that avoid ambiguity.
- Make required fields obvious.
- Always include a descriptive label with each input, the
forattribute of the label should match the
idof the input it labels
- Fields with validations must have a the
aria-desrcibedbyattribute to ensure the error message for the field is read by assistive technology.
This field is required
- Input fields with
:focusshould have an outline and/or a visible change to show it has focus.
- If the input field with
:focushas an error, the error should be read by a screen reader
- If input has focus,
SHIFT+TABshould move focus to next focusable element...
- If input has focus the
Enterkey should submit the form.
Related Aria Attributes
Use this to provide a detailed descriptions of a field that contains errors.
Please enter a valid email address
This would announce "Email Address, edit text. Please enter a valid email address"