Text Input - 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.
Please refer to the 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.
Custom character masks
To define custom character patterns in your mask, use the 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,/./
In the example above:
#is replaced with any digit,/\d/+0and other symbols remain fixed in the input
For full configuration options, refer to the official @react-input/mask documentation
Accessibility
Please refer to the W3C Forms Concepts guide when working with forms.
System Modifiers
The TextInput component accepts props applied using the following system modifiers: