# FormField Hints and Errors

The [FormField](https://www.telerik.com/kendo-angular-ui/components/inputs/api/formfieldcomponent) component provides comprehensive support for displaying contextual hints and validation error messages for form controls. This functionality is essential for creating user-friendly forms that guide users through data entry and provide clear feedback about validation requirements and errors.

Effective use of hints and error messages improves user experience by:

* **Providing guidance**—Hints help users understand what information is expected in a field
* **Preventing errors**—Clear instructions reduce the likelihood of invalid input
* **Offering immediate feedback**—Validation messages appear as users interact with form fields
* **Improving accessibility**—Proper implementation ensures screen readers can access instructional content

To implement hints and errors within the FormField component, you need to include the [HintComponent](https://www.telerik.com/kendo-angular-ui/components/inputs/api/hintcomponent) and [FormErrorComponent](https://www.telerik.com/kendo-angular-ui/components/inputs/api/errorcomponent) components inside the FormField component.

```html
<kendo-formfield>
  <kendo-label [for]="name" text="Name"></kendo-label>
  <kendo-textbox #name formControlName="name"></kendo-textbox>
  <kendo-formhint>Enter your full name</kendo-formhint>
  <kendo-formerror>Invalid name</kendo-formerror>
</kendo-formfield>
```

For comprehensive information about validation patterns and error handling strategies, refer to the [Form Validation](https://www.telerik.com/kendo-angular-ui/components/inputs/form/validation) article.

The following example demonstrates the FormField component with hints and errors in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/form/formfield/visibility/source.txt)

## Controlling the Visibility

The FormField component provides fine-grained control over when hint and error messages are displayed through the [`showHints`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/formfieldcomponent#showhints) and [`showErrors`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/formfieldcomponent#showerrors) properties. This control ensures messages appear at the appropriate time in the user's interaction workflow.

By default, the component follows these visibility rules:

* Error messages are hidden initially and display when the form control becomes invalid after user interaction (touched or dirty state).
* Hint messages are visible initially and hide when error messages need to be shown, preventing visual clutter.

The `showHints` property accepts the following values:

* `initial`—The hint messages are displayed when the state of the form-bound component is `valid` or `untouched` and `pristine`.
* `always`—The hint messages are always displayed, leaving the control of their content visibility to the developer.

The `showErrors` property accepts the following values:

* `initial`—The error messages are displayed when the state of the form-bound component is `invalid` and `touched` or `dirty`.
* `always`—The error messages are always displayed, leaving the control of their content visibility to the developer.

The following example demonstrates customized visibility control where hints are always shown and errors follow the initial display pattern:

```html
<kendo-formfield showHints="always" showErrors="initial">
  <kendo-label [for]="name" text="Name"></kendo-label>
  <kendo-textbox #name formControlName="name"></kendo-textbox>
  <kendo-formhint>Enter your full name</kendo-formhint>
  <kendo-formerror>Invalid name</kendo-formerror>
</kendo-formfield>
```

This configuration ensures users always see helpful guidance while error messages appear only when validation fails after user interaction, providing a balanced user experience.

## Message Alignment

The positioning of hint and error messages can significantly impact the visual flow and usability of your forms. The FormField component allows you to control message alignment through the [`align`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/messagealign) property available on both the HintComponent and ErrorComponent.

```html
<kendo-formhint align="start">Your username</kendo-formhint>
<kendo-formerror align="end">Error: Username is required</kendo-formerror>
```

The following example demonstrates different alignment configurations for hint and error messages.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/form/formfield/alignment/source.txt)

## Suggested Links

* [API Reference of the FormField](https://www.telerik.com/kendo-angular-ui/components/inputs/api/formfieldcomponent)
* [API Reference of the HintComponent](https://www.telerik.com/kendo-angular-ui/components/inputs/api/hintcomponent)
* [API Reference of the ErrorComponent](https://www.telerik.com/kendo-angular-ui/components/inputs/api/errorcomponent)
* [FormField Overview](https://www.telerik.com/kendo-angular-ui/components/inputs/form/formfield)
* [Form Validation](https://www.telerik.com/kendo-angular-ui/components/inputs/form/validation)