Forms and validation

Use native form elements with Bootstrap’s form classes. Every control needs a visible label; placeholder text is an example, not a label.

Text input

Account number (required)

For example, 1234567890

<label class="form-label" for="account-number">Account number (required)</label>
<div class="form-text" id="account-number-hint">For example, 1234567890</div>
<input class="form-control" id="account-number" name="account-number" type="text"
  inputmode="numeric" aria-describedby="account-number-hint">

Make controls only as wide as their expected answer when the surrounding layout permits. Accept reasonable variations such as postcodes with or without spaces instead of making users repair them.

Select and textarea

Preferred contact method

Additional information

Checkboxes and radios

How should we contact you?

Telephone

Use a checkbox for independent choices and radio buttons when exactly one answer can be selected. Group related choices in a fieldset with a concise legend.

Validation error

Show errors after submission or when the user leaves a field. Do not validate on every keystroke. Move focus to the error summary when submission fails, then link each message to its field.

There is a problem

Enter an email address

Email address (required)

We will only use this to reply to your request.

Enter an email address

Do not show a success state for ordinary fields. Silence is sufficient when the value is accepted. Error text must explain how to fix the problem and must not rely on colour alone.

For a full page composition example, see the Sign in pattern.