UI Toolbox logoUI Toolbox

Field error state

FieldError puts a field in an error state. The border and the label of the field get the danger color, and an error Callout next to the field says what is wrong. Use it for a required field that is empty, or for a value that is not valid. It works with each Unity field and each toolbox field.

How to mark a required field:

saveButton.clicked += () =>
{
    if (string.IsNullOrWhiteSpace(nameField.value))
    {
        FieldError.Show(nameField, "Enter a user name.");
        return;
    }
    FieldError.Clear(nameField);
    save();
};

How to remove the error when the user types:

nameField.RegisterValueChangedCallback(_ => FieldError.Clear(nameField));

How to show the error state with no callout (for example, when a label below the form has the message):

FieldError.Show(mailField);

In a Wizard, give the field to ShowValidationError. The wizard sets and clears the error state for you:

wizard.GetStep("user").Validator = _ =>
{
    if (nameField.value.Length > 0) return true;
    wizard.ShowValidationError("Enter a user name.", nameField);
    return false;
};
Member Description
FieldError.Show(field, message, placement) Gives the field the error state. With a message, it also opens an error callout next to the field. The default placement is CalloutPlacement.Right. A second call replaces the message.
FieldError.Clear(field) Removes the error state and closes the callout.
FieldError.Has(field) True while the field has the error state.
FieldError.CalloutOf(field) The open error callout of the field, or null. Use it to change the callout, for example its TipSize.

Styling

Class Element
tb-field--error The field in the error state. The package rules set border-color of its unity-base-field__input and color of its unity-base-field__label to --tb-color-danger.
tb-callout--error The callout. See Callout.