Text input
Use the text input component to allow users to enter text that’s no longer than a single line. For example, their name or phone number.
Use the text area component to allow users to enter longer text.
By default, the text input component has a fixed width of 480px. This will shrink to fit screens smaller than 480px wide. The component includes padding so any icons, that some browsers might insert, fit in the input field.
You can help users understand what they should enter by making the text input an appropriate size for its intended purpose. For example, a postcode field could be made smaller than an email address field.
You can change the fixed width by using the max-width attribute.
With hint
Input types
Numbers
lf you’re asking the user to enter a number, set the input type attribute to numeric to trigger the numeric keypad on devices with on-screen keyboards.
Phone numbers
lf you’re asking the user to enter a phone number, set the input type attribute to tel to trigger the numeric keypad on devices with on-screen keyboards.
Email addresses
lf you’re asking the user to enter an email address, set the input type attribute to email to trigger the email keyboard on devices with on-screen keyboards.
With the email keyboard, the user's input is also automatically validated to ensure it’s a correctly formatted email address.
Autocomplete attribute
Add an autocomplete attribute on fields with a relevant input purpose (W3C). This is mainly where you're asking for personal data.
Autocomplete attributes help users fill in forms by auto filling fields based on what they've entered previously.
With error
Display an inline error when there's something wrong. For example, when a user tries to proceed without entering any text and the question is mandatory.