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