InputText

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.

$
Oops!

autoResize

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.

Disabled

Use the disable property to make an input field un-editable.

Placeholders

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.



Accessibility

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.

aria-describedby

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"