TC Design

How do I show in-line validation on form fields in Figma?

Owned by Allison Batoff
Jul 31, 2024
2 min read

Telerik UI for Blazor provides several options for validation on its form fields. One of these options is in-line validation, please see Blazor Components Demos and Examples for a demo.

Screenshot of the Telerik Blazor Form component. At the top of the form is a red error message summary. Each form field label is highlighted in red and each input has a red border. Below each input is a red validation message in smaller text.
Figure 1 - Form component from Telerik UI for Blazor showing inline validation

The current Figma UI kit (3.0) Telerik & KENDO UI Kit - Internal has various properties that can be applied to form fields, including invalid states for the label and input. However, there is no property to allow for in-line validation to be shown. We have reported this issue to the owner of the Figma UI kit at Telerik and will update the kit if a fix becomes available.

Screenshot of an input field from the Telerik UI kit in Figma with the title Street address and the input highlighted in a red border. On the right side, is the Design panel where the Input component properties are displayed. Size is Medium, Fill Mode is Outline and State is Invalid.
Figure 2 - Input field in Figma showing the state of the field as Invalid in the Design panel properties

Recommended Solution

To solve for this, you can add your validation message using Figma’s Text feature and apply the following variables:

Text: Base Text/SM/Small

Colour: Red/Light/8

Spacing: kendo-spacing 1 (to specify the vertical gap between the input and the validation message)

TC Design