Skip to main content

Text input

Use the text input component when you need to let users enter text that's no longer than a single line, such as their name or phone number.

Don't use a text input if you need to let users enter text that will span multiple lines, use a textarea component instead.

With label​

<div class="field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block" for="name">Name</label>
    <input type="text" id="name" class="field__input" name="name" />
</div>

With label and hint​

<div class="field">
  <label class="field__label field__label--block" for="full-name">Your full name</label>
  <div class="field__instructions" id="full-name-id-hint">Including any middle names</div>
  <input type="text" id="full-name" aria-describedby="full-name-id-hint" class="field__input" name="full-name" />
</div>

With error​

Display an inline error when there's something wrong.

Make sure:

  • The form control has the aria-describedby attribute and references an associated error message
  • The associated error message has a unique ID

Remove the error state when the input is updated, to avoid confusing users.

To do this:

  • Remove the field--error class
  • Remove the <div> element with the class field__message field__message--error

Clear the input to reset the error state in this example.

You need to tell us your name
<div class="field field--error">
  <label class="field__label field__label--block" for="name">Name</label>
  <div class="drop drop--block">
    <input aria-describedby="error-id-hint" type="text" id="name" class="field__input" name="name" />
    <div id="error-id-hint" class="field__message field__message--error">You need to tell us your name</div>
  </div>
</div>

Width of text input field​

Help users understand what they should enter by adjusting the size of the text input field according to the size of the expected input.

For example, use the shorter width for a field where the input will be a number.

<div class="field field--short-number">
  <label class="field__label field__label--block" for="age">Age</label>
  <input type="text" id="age" class="field__input" name="age" />
</div>

Autocomplete​

Use the autocomplete attribute on text inputs to help users complete forms. This lets you specify an input's purpose so browsers can autofill the information on a user's behalf if they've entered it previously.