tabler/docs/ui/forms/form-validation.mdx

---
title: Validation states
summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
description: Indicate valid or invalid inputs.
---

## Validation states

To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.

To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.

```html example centered separated columns="1" height="20rem"
<input type="text" class="form-control is-valid" placeholder="Valid State..." />
<input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
```

## Validation feedback

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

```html
<input type="text" class="form-control is-valid" placeholder="Valid State..." />
<div class="valid-feedback">Looks good!</div>
```

This is how it works in the example below:

```html example centered columns="1" height="20rem"
<div>
  <label class="form-label required">City</label>
  <input type="text" class="form-control is-invalid" required>
  <div class="invalid-feedback">
    Please provide a valid city.
  </div>
</div>
```

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

```html example centered columns="1" height="20rem"
<div>
  <label class="form-label required">City</label>
  <input type="text" class="form-control is-valid" value="Warsaw">
  <div class="valid-feedback">
    Looks good!
  </div>
</div>
```

## Subtle validation states

If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.

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

```html
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
```

Look how it works in the example below:

```html example centered separated vertical columns="1" height="20rem"
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
```