---
title: Validation
seoTitle: Form validation states
order: 12
summary: Validation states mark a field as valid or invalid and show a message under it, so the user sees what to fix.
description: Show valid and invalid states on form fields with feedback messages, so users know exactly what to correct before submitting.
related: [/ui/forms/elements, /ui/forms/helpers]
---
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';

## Validation states

Validation states mark a field as valid or invalid, so the user sees which fields to correct and, for an invalid one, why.

To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes. For assistive tech, also set `aria-invalid="true"` on invalid controls.

<Example column>
<div>
  <label class="form-label" for="state-valid">Valid state</label>
  <input type="text" id="state-valid" class="form-control is-valid" aria-invalid="false" />
</div>
<div>
  <label class="form-label" for="state-invalid">Invalid state</label>
  <input type="text" id="state-invalid" class="form-control is-invalid" aria-invalid="true" />
</div>
</Example>

## Validation feedback

To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes. Link the message with `aria-describedby` when you can.

<Example column>
<div>
  <label class="form-label required" for="city-invalid">City</label>
  <input type="text" class="form-control is-invalid" id="city-invalid" required aria-invalid="true" aria-describedby="city-invalid-feedback" />
  <div class="invalid-feedback" id="city-invalid-feedback">Please provide a valid city.</div>
</div>
</Example>

You can also use the `.valid-feedback` to provide users with positive feedback.

<Example column>
<div>
  <label class="form-label required" for="city-valid">City</label>
  <input type="text" class="form-control is-valid" id="city-valid" required value="Warsaw" aria-describedby="city-valid-feedback" />
  <div class="valid-feedback" id="city-valid-feedback">Looks good!</div>
</div>
</Example>

## Subtle validation states

For a quieter version, show a tick or a cross icon instead of the colored frame and the feedback message.

To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.

These variants drop the colored frame and the feedback message, so the state is left to a small icon. Keep `aria-invalid` on the field, and keep the reason in text somewhere the field points to - otherwise the error exists only as a symbol.

<Example column>
<div>
  <label class="form-label" for="state-valid-lite">Valid state</label>
  <input type="text" id="state-valid-lite" class="form-control is-valid is-valid-lite" aria-invalid="false" />
</div>
<div>
  <label class="form-label" for="state-invalid-lite">Invalid state</label>
  <input type="text" id="state-invalid-lite" class="form-control is-invalid is-invalid-lite" aria-invalid="true" />
</div>
</Example>

## Accessibility

- Colour alone must not say that a field is wrong. Keep `aria-invalid="true"` on the field and a message in text.
- Give the feedback element an `id` and point the field at it with `aria-describedby`, so the message is read with the field rather than after the form.
- Say what to do, not only what failed. "Please provide a valid city" beats "Invalid".
- On submit, move focus to the first field that failed. Otherwise a keyboard user has to hunt for it.
- Validate when the user leaves a field, not on every keystroke. A message that appears and disappears while typing is announced over and over.

## SCSS variables

Use these SCSS variables to customize form validation states. The default values are:

<CodeDocs name="form-validation-variables" file="core/scss/_variables.scss" />