## Usage

The `<TextInput />` component is most commonly used in a form context, where you would nest it inside a [Field](/packages/field/) to get a label, validation message and spacing out of the box.

## Type

The text input will by default render as `<input type="text" />`, but also supports these types: `password`, `email`, `number`, `tel`, and `url`. When suitable, these are important to use for various browsers' auto-fill functionality e.g.

```tsx live
<Flex flexDirection="column" gap="small">
  <TextInput placeholder="Text (default)" />
  <TextInput type="password" placeholder="Password" />
  <TextInput type="email" placeholder="Email" />
  <TextInput type="number" placeholder="Number" />
  <TextInput type="tel" placeholder="Tel" />
  <TextInput type="url" placeholder="Url" />
</Flex>
```

## Size

The input supports two sizes, `small` and `medium` (default). Prefer using size consistently with other form controls (a button e.g.) that support the same sizes.

```tsx live
<Flex flexDirection="column" gap="small">
  <TextInput size="small" placeholder="Small" />
  <TextInput placeholder="Medium (default)" />
</Flex>
```

## Adornment

Use `adornmentStart` or `adornmentEnd` prop when you need a prefix/suffix to the input, in text string format.

```tsx live
<Flex flexDirection="column" gap="small">
  <TextInput type="number" placeholder="Enter amount" adornmentStart="$" />
  <TextInput type="number" placeholder="Enter amount" adornmentEnd="AUD" />
</Flex>
```

## Placeholder

Use the `placeholder` prop to provide a hint or example of what the user can enter.

Avoid using placeholder text as a replacement for labels or descriptions. It should not contain any crucial information, as it disappears when the user starts typing.

```tsx live
<Field label="Address line 1">
  <TextInput placeholder="E.g. 1 Sesame Street" />
</Field>
```

## Disabled

Use the `disabled` prop when the user shouldn't be able to manipulate the value of the input.

```tsx live
<TextInput disabled placeholder="Disabled" />
```

## Invalid

Use the `invalid` prop to communicate that validation has failed for this particular text input.

```tsx live
<TextInput invalid placeholder="Invalid" />
```

## Other native props

The `<TextInput />` also supports the following native `InputHTMLAttributes` (see [props](/packages/text-input/props) for a full list):

- `onBlur`
- `onFocus`
- `onChange`
- `placeholder`
- `value`

TextInput

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources