---
name: Text Input
menu: Patterns
parent: Modules
route: /patterns/text-input
---

# Text Input

Text input enables the user to interact with and input data.

```specimen-react
  <TextInput
    id="novalidationinput"
    label="Name of installation owner?"
    status="unknown"
    labelIsHeading={true}
  />
```

```specimen-research-insight
Members can sign up to the Bulb Feed-In Tariff using an online form. When testing this form, we found that users wanted their information prefilled in the relevant places rather needing to replicate it several times. If members have information on their Bulb account, they expect this information to be pre-filled into any Bulb forms when they are logged in.
```

```specimen-react
  <TextInput
    id="withdescriptioninput"
    label="Account number"
    description="This is found at the top of your bill."
    status="unknown"
    placeholder="00000000"
  />
```

```specimen-research-insight
Members can submit meter readings in their Bulb account, but sometimes need to submit fewer digits than what the interface requires. When testing this form, we found that providing further assistance for text input (such as a reminder to input a 0 first, mirroring their meter) helped users submit the correct reading. Provide clear advice for any requirements relating to a text input.
```

## With prefix

```specimen-react
  <TextInput
    id="positivevalidationinput"
    label="Top up amount"
    status="unknown"
    prefix="£"
    status="unknown"
  >
    valid value
  </TextInput>
```

## With positive validation

```specimen-react
  <TextInput
    id="positivevalidationinput"
    label="Account number"
    description="This is found at the top of your bill."
    status="valid"
  >
    valid value
  </TextInput>
```

## With negative validation

```specimen-react
  <TextInput
    id="negativevalidationinput"
    label="Account number"
    description="This is found at the top of your bill."
    status="invalid"
    errorMessage="Incorrect value"
  >
    invalid value
  </TextInput>
```

Below you'll find a contextual example of an invalid state. You'll need to type more than 15 characters to trigger the error.

```specimen-react
<DocStateProvider initialState={{ status: 'valid' }}>
  {({ state, setState }) => {
    const handleValidation = (event) => {
      const value = event.target.value;
      setState((state) => ({ ...state, status: value.match(/^\D{2,15}$/) ? 'valid' : 'invalid' }))
    }

    return (
        <TextInput
          id="livenagativevalidationinput"
          label="First name"
          description="Your first name (max 15 characters)"
          errorMessage="Oops, your name is either too short or too long."
          onBlur={handleValidation}
          status={state.status}
        />
    )
  }}
</DocStateProvider>
```

## As a password input

Using a show/hide password button

```specimen-react
<TextInput
  showHideButton
  type="password"
  id="passwordinput"
  label="Password"
  description="This is your Bulb Account password"
  status="unknown"
  data-lpignore="true"
>
  examplepassword
</TextInput>
```

## Field length configuration

You can define different width of the input with `fieldLength` prop (short, long or full-width).

```specimen-react
<TextInput
  label="CVV code"
  description="Enter your security code"
  fieldLength="short"

/>
```
