React

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).

It doesn't support checkbox or radio types, these types can be achieved using Control Field instead.

<TextInput />

Props

Masking

You can use a mask to autoformat the user's input by passing a string to the mask prop using the following formatting rules:

• 9 for numbers
• a for letters
• * for any alphanumeric character
• Any other characters will prefill

<TextInput placeholder='dd/mm/yyyy' mask="99/99/9999" />

System Modifiers

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

• flex-child
• grid-child
• margin
• position
• width

Accessibility

Please refer to the W3C Forms Concepts guide when working with forms.