Text Input

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

☝️ 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.

☝️ 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

With positive validation

With negative validation

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

As a password input

Use the PasswordInput component, a variant of TextInput with a few more features.

The showHideButton prop can be used to include a show/hide button to reveal the password.

If a measurePassword prop is supplied a password strength meter will be rendered below the input. measurePassword should be a function that takes a password and returns an object of the type PasswordStrength or Promise<PasswordStrength>. This will be used to display the appropriate strength feedback to the user. The zxcvbn library is a good option for measuring password strength.

Field length configuration

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