#FormField

A FormField is a wrapper for one input of a form. It shows a label, the input, a description under the input, and an error text. It works with each Unity field and each toolbox field.

How to make a form with a description, an error and a group of fields:

<tb:FormField name="userName" label="User name" description="Other players see this name.">
    <ui:TextField />
</tb:FormField>
<tb:FormField label="Music" description="The volume of the music." horizontal="true">
    <ui:Slider low-value="0" high-value="100" />
</tb:FormField>

<ui:GroupBox text="Notifications" class="tb-field-set">
    <tb:FormField description="Send a mail when a build fails.">
        <ui:Toggle text="Build mails" />
    </tb:FormField>
    <tb:FormField description="Show a message when a friend comes online.">
        <tb:Switch label="Friends" />
    </tb:FormField>
</ui:GroupBox>

var userName = root.Q<FormField>("userName");
var input = userName.Q<TextField>();
saveButton.clicked += () =>
{
    userName.Error = string.IsNullOrWhiteSpace(input.value) ? "Enter a user name." : "";
    if (!FieldError.Has(userName)) save();
};
input.RegisterValueChangedCallback(_ => userName.Error = "");

• The child of the wrapper is the input.
• An error sets the class tb-field--error on the wrapper, so FieldError.Has(formField) is true while Error has a text.
• In a horizontal wrapper, the description and the error stay under the input, not under the label.
• A long label, description or error wraps.
• The wrapper adds no focus stop. The keyboard and a gamepad move between the inputs as they do without it.

Tips:

• Give the input no label of its own when the wrapper has a Label. Two labels show two texts.
• For a Toggle, a RadioButton or a Switch, keep the text of the control and set only Description on the wrapper. The description shows under the control.
• Use Error for a message that stays under the field. Use FieldError.Show(field, message) for a callout next to the field. Do not use both on one field.
• To remove the error, set Error to an empty text. FieldError.Clear removes the color but not the text.
• Use horizontal wrappers for a settings page with short inputs, and vertical wrappers for a narrow form.

#Styling

.tb-form-field--horizontal > .tb-form-field__label { width: 200px; }