# Core/TextInput - Design

TextInput component for single-line text entry. Backwards compatible with Ant Design v5 Input.

## Anatomy

## Properties

### Value

The value is submitted with the form. The value replaces any placeholder text in the field after the first character
is entered.

### Placeholder text

Placeholder text is visible until a character is entered. Because the placeholder text disappears, putting
instructions or requirements as placeholder text is not accessible. Helper text is the preferred method to convey
this information.

### Size

<p>
  `md`

  : Standard size used across the majority of the UI.
</p>

<p>
  `sm`

  : Used when an input is in a supporting position, such as directly above a table for filtering.
</p>

### Status

`error`: Used to indicate that the input has an error.

`warning`: Used to indicate that the input has a warning.

## Behavior

### Overflow

Input values overflow past the trailing edge of the input container. While focused, the content will shift to keep
the cursor in view as the user enters characters. When the field loses focus, the content will scroll to the
beginning. Focusing on the field again returns the user to the end of the content. Generally, text fields should
avoid overflow. Use a Text area field for longer entries.

### Error messages

When a field fails validation, the input's border displays the attention color. The helper text also displays
an error message to help the user successfully fulfill the input requirements. Error messages are concise and
direct, and replace any previously visible helper text. An error icon is prepended to the helper text to enhance
discoverability.

### Disabled

Disabled fields can not be modified and can not gain focus. Values in a disabled field are not submitted as part of
the form.

### Read-only

Read-only fields can not be modified. The value of a read-only field is submitted as part of the form.

## Accessibility

### Keyboard interaction

| Key                 | Function                                                                                                         |
| ------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `Tab` / `Shift+Tab` | Moves focus into/out of the input field.<br />For inputs with embedded actions, move to the next/previous action |
| `Enter` / `Space`   | For inputs with embedded actions, activates the currently focused action.                                        |