---
title: "Text Input — React"
canonical: https://sky-ui.cf.sky.com/components/text-input/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Text Input — React

Text inputs are fields that users can type free text into.

```js
import { TextInput } from '@sky-uk/ui-core';
```

---

`TextInput` is a form component that maps closely to the native `input` element and supports all of the same attributes. [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).

It doesn't support `checkbox` or `radio` types, these types can be achieved using [Control Field](/components/control-field/) instead.

```tsx
<TextInput />
```

**Note:** Please refer to the [Field](/components/field/) documentation for a fully composed example with
  label and in-line messaging.

## Props

### Masking

You can enable auto-formatting of user input by passing a string to the `mask` prop.

By default, the underscore character (\_) is used to indicate any character in the mask.

```tsx
<TextInput placeholder='dd/mm/yyyy' mask="__/__/____" />
```

#### Custom character masks

To define custom character patterns in your mask, use the [replacement](https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#replacement) prop

Although not necessary, we recommend conforming to the following formatting rules:

- `#` for numbers, `/\d/`
- `@` for letters, `/[a-zA-Z]/`
- `_` for any alphanumeric character, `/./`

```tsx
<TextInput mask="+0 (###) ###-##-##" replacement={{ '#': /\d/ }}/>
```

In the example above:

- `#` is replaced with any digit, `/\d/`
- `+0` and other symbols remain fixed in the input

**Note:** For full configuration options, refer to the official
  [@react-input/mask](https://www.npmjs.com/package/@react-input/mask) documentation

## Accessibility

Please refer to the [W3C Forms Concepts](https://www.w3.org/WAI/tutorials/forms/) guide when working with forms.

## System Modifiers

The `TextInput` component accepts props applied using the following system modifiers:

- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [position](/core/system/position/)
- [width](/core/system/width/)