Text Input

Text inputs let users enter and edit text.

Overview

Your nameFirst Name (optional)The Text Input component.

Usage

The Text Input should be used to let the user enter a single line of text. It typically appears in forms and modals. If you require the user to enter multi-line content, then the Textarea component should be used instead.

Design

The Text Input should stand out and be easily discoverable by users. The text label should be concise, effectively communicating to the user the type of input required.

Anatomy

Your nameFirst Name (optional)Anatomy of the Text Input component.Label1User Input2Container3
  1. Label. Should be used to describe to the user what the desired input should be. Every field should have a text label. The label should always be visible on all inputs, excluding search bars.
  2. User Input. This is the text the user has entered into the Text Input.
  3. Container. Wraps the entire component.

Sizing & Spacing

The Text Input is available in one standard size. It has been created in relation to other form elements to ensure consistency.

States

EmptyActiveFilledYour nameFirst Name (optional)First Name (optional)First Name (optional)Text Input states.

The Text Input has three states - default, active, and filled.


Pre & Post Fix Labels

The Fix Labels are used for adding additional information to an input. They can be either icons or text.

Your nameFirst Name (optional)The Text Input component.

Usage

The labels should accompany the main input label. They should not be the main focus of the Text Input.

Anatomy

£Your nameFirst Name (optional)Anatomy of the Pre & Post Fix labels.Content2Container1
  1. Container. Wraps the Pre and Post fixed Labels
  2. Content. Can be either text or an icon.

Sizing & Spacing

The Pre and Post fixes don’t have any inherit sizes themselves. As they are additions to the Text Input component, they are sized according to the input.

Hierarchy & Placement

Only Pre and Post fix should be used on each input.

The `TextInput` component is used to capture and display text value within a form. The basic component can be used with a handler to control state or an enhanced `Formik` version can be used with in Formik forms.

Example with Formik

Invalid Name
import { Field, Formik, Form } from 'formik'
import { Formik as FormComponents} from '@royalnavy/react-component-library'
const { TextInput } from FormComponents
...
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
  <Field className="rn-textinput--is-valid" name="colour" component={TextInput} label="My Label" />
  <Field name="name" component={TextInput} label="Name" />
  <Field name="city" component={TextInput} label="City" />
  <Field name="hero" component={TextInput} endAdornment={<Search />} label="Hero" />
  <Field name="fruit" component={TextInput} startAdornment={<Search />} label="Fruit" />
  <Field name="search" component={TextInput} placeholder="search" />
</Form>
</Formik>

Properties

The TextInput component renders an input element with the value passed to it. The field itself does not handle state, this is achieved by passing both the current value for the field and an onChange function. This function is called with a new value when a user interacts with the field, it is up to that function to update the state and pass the new value to display back to the TextInput. This is described in more detail in the form overview.

An enhanced version of the field is also exported that is compatible with Formik.

TextInput
NameTypeRequiredDefaultDescription
autoFocusbooleanFalsen/aMark the field with the autofocus property causing the browser to focus on the field when the page loads.
classNamestringFalsen/aOptional additional css class to associate with the component wrapper
isDisabledbooleanFalsefalseMark the field as disabled/inactive
endAdornmentReact.ReactNodeFalsen/aAn optional component to display at the end of a field, such as a search SVG
footnotestringFalsen/aA message to display below the field
idstringFalseunique idProvide the ID for a field and tie it to its label. If one is not provided then a unique id will be created
labelstringFalsen/aIdeally a field should include a label to help the user understand what the field is for and help screen readers
namestringFalsen/aThe field name
onBlurReact.FormEvent<Element>Truen/aCalled when the field loses focus
onChangeReact.ChangeEvent <HTMLTextAreaElement>Truen/aCalled when the field value changes
placeholderstringFalsen/aIf a label is not provided then a placeholder should be.
startAdornmentReact.ReactNodeFalsen/aAn optional component to display at the start of a field, such as a search SVG
typestringFalsetextThe field type if it is not a standard text field
valuestringFalsen/aThe field current value