Interface of InputText
🏗 Coming Soon

The <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

Use iconBefore and iconAfter to render an icon before or after the input.

For more custom content, before and after accept a React node. A string is passed to before or after will have formatting applied, while JSX will be rendered as-is. If both iconBefore and before, or iconAfter and after are passed, a warning will appear in the console and the InputText will not render.



Use autoResize to allow the width of the component to adjust to the current value or placeholder.

Start typing

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.

ReadOnly Property

As the name suggests, readOnly makes the text un-editable.

Required Property

When set for <InputText /> in the context of a form, the input field must be filled out before submitting the form.


Best Practices

  • 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

Markup Expectations

  • Always use the <input> element with the proper type attribute 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 required attribute: <input type="text" id="first-name" required>

Labeling Expectations

  • Use clear and descriptive labels that avoid ambiguity.
  • Make required fields obvious.
  • Always include a descriptive label with each input, the for attribute of the label should match the id of the input it labels
  • Fields with validations must have a the aria-desrcibedby attribute to ensure the error message for the field is read by assistive technology.

This field is required

Focus Expectations

  • Input fields with :focus should have an outline and/or a visible change to show it has focus.
  • If the input field with :focus has an error, the error should be read by a screen reader

Keyboard Expectations

  • If input has focus, TAB and SHIFT+TAB should move focus to next focusable element...
  • If input has focus the Enter key should submit the form.


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"