FormField
The FormField component is the outermost layout component of an input
component (for example TextInput), providing support for displaying a sibling
label element alongside.
It also features responsive design: small containers show the label elements aligned on top of the input. In comparison, wider containers show input elements with their label aligned to the left.
The form field is child-agnostic.
Import
import { FormField } from '@dynatrace/strato-components/forms';
Demo
You can use the FormField component to render any form control. You also need
to render a label for accessibility. The FormField can only render one form
control component inside its children, as shown in the example below.
Set label
The connection between the form control inside the FormField component and the
label is done automatically if you don't set any id on the control. However,
if you do set a custom id, you need to handle the connection manually by
adding the htmlFor prop to the Label with the same id, as shown below.
Furthermore, the required, disabled, and id props are stored in a shared
context, so they're also passed to the corresponding input.
Show custom hints and errors
You can use the FormFieldMessages component to render messages (errors and
hints) coming from the form control element. If no render function is provided,
all messages are displayed, but you can also use a function to filter the
messages. You can add custom hint or error messages to the FormFieldMessages,
which will automatically be connected to the form control. If an error is
provided, the form submission is disabled for the connected form control.
Standard validation constraints defined as props—such as required,
minLength, maxLength, and pattern—are automatically reflected as error
messages in FormFieldMessages. You don't need to wire these up manually. When
a constraint is violated, the corresponding error message appears without
additional configuration. Available constraints depend on the form control.
Besides the list of messages, the render function receives a second argument
with showErrors and isValid, so you can decide what to render — a hint when
there's nothing wrong yet, or an error once there is — without re-deriving the
field's reveal timing yourself. The example below shows a hint by default, falls
back to the form control's own message (native or Strato) once one exists, and
prefers a custom, business-specific error over that when one is toggled on.
showErrors only signals that a potential error would now be visible at this
point in time — it says nothing about whether an error actually exists. It
becomes true once the field's own reveal timing has fired (after first blur,
on overlay close, or immediately for click-only controls) and then stays
true, even after the field becomes valid again, so a later error can show
immediately without waiting for another reveal. Use it when you render your own
error/hint content and need to know whether it's time to show an error; don't
use it as a stand-in for validity, and don't reach for it at all if you're not
customizing the render function — the default, automatic rendering already
respects this timing.
A FormFieldMessages.Item with variant="error" normally follows the same
reveal timing as the rest of the field. Pass showImmediately on the item to
reveal it as soon as it mounts instead — this is meant for errors whose own
trigger already acts as the reveal event, such as the toggle button in the
example below, where clicking it is the reveal event rather than the field's
usual blur/overlay-close gate.
Use custom layout
You can customize the layout to show the label in different positions relative
to the FormField.