TextInput

A TextInput is a form element that lets users input and edit a single-line text value.

Working in progress

This component is still under development. It is not yet available in releases of Atlas.

Overview

When to use TextInput

Use the TextInput component in forms when the user’s answer to a prompt can not easily be predicted, or when there is significant variability in potential inputs.

About TextInput

Define the component's anatomy by listing all elements or subcomponents that make it up. Provide a definition for each component’s element and include as many Do’s and Don’ts as needed to outline best practices for using the component effectively.

Start Icon (optional)

A start icon can be included to visually enhance the input's purpose. For example, the "user avatar" icon might be used in a username field.

<TextInput
  inputType="text"
  startIcon="person"
  placeholder="Enter your username"
/>

• Do: Use a simple icon that is easily understandable to users.

Input (optional)

The following input types can be used:

1. Text (default)
2. Search
3. Number
4. Email
5. Password
6. Telephone
7. URL
8. Week
9. Month
10. Date
11. Date and time
12. Time

Placeholder text (optional)

Placeholder text provides an example of what type of information is being requested in the input.

<TextInput
  inputType="text"
  placeholder="Enter your name"
/>

• Do: Placeholder text should further illustrate and support the TextInput's label.
• Don't: Placeholder text should never replace the label nor be the input's only description.

End icon (optional)

A secondary end icon be included if needed.

Clear button (optional)

A 'clear' button can be included to remove the typed content within the input field.

Examples

Basic usage

With initial value

Input type

Any of the native input types can be used. Some types may result in a browser-provided user interface, like a date picker for a date input.later.

Clearable

A clearable TextInput will have a clear button when there is text in the input. When clicked, the clear button will set the input value to an empty string.

    <AtlTextInput inputType='text' clearable=true />

With icons

Any of the native input types can be used. Some types may result in a browser-provided user interface, like a date picker for a date input.later.

<AtlTextInput
  inputType="text"
  startIcon="user"
  endIcon="check"
  placeholder="Enter your username"
/>

• Do:
  • Use icons to clarify the purpose of the input (e.g., a user icon for username, an email icon for email).
  • Pair icons with clear placeholders or labels.
  • Use end icons to indicate status or actions (like a checkmark for valid input).
• Don't:
  • Don’t rely only on icons without labels or placeholders — it can confuse users.
  • Avoid using too many icons that create visual clutter.
  • Don’t use icons that are ambiguous or irrelevant to the input’s purpose.

Form field

A TextInput can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. Refer to the Field page for more information.

Native validation

The TextInput component exposes native constraint validation methods. Refer to the methods below to review all of the supported features. This demo sets the input type to "email" and validates the input on blur. When the input is invalid, it sets the Field's status to "error" and passes the native validation message to the Field component for display.

Technical implementation

Props

Prop Name	Description	Type	Values	Default
value	Current value of the input. (Usado com binding)	string | number	—	''
inputType	HTML input type attribute.	string	'text', 'search', 'number', 'email', 'password', 'tel', 'url', 'week', 'month', 'date', 'datetime-local', 'time'	'text'
status	Validation status. Changes the style according to the state.	string	'default', 'error', 'success'	'default'
disabled	Disables the input if true.	boolean	—	false
readonly	Makes the input read-only (not editable).	boolean	—	false
placeholder	Placeholder text shown when the input is empty.	string	—	'Placeholder'
startIcon	Optional icon displayed at the start (left) of the input field.	string	—	''
endIcon	Optional icon displayed at the end (right) of the input field.	string	—	''
clearable	Adds a clear button that appears when there is text in the input. Clicking it clears the input value.	boolean	—	false

Keyboard navigation

Key	Function
Left arrow / Right arrow	The left and right arrows navigate through the text content within the input.
Up arrow / Down arrow	Up arrow moves the focus from the last position of the input to the first one, while down arrow moves it from the first position to the last.