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.

OverviewProperties

Import

import { FormField } from '@dynatrace/strato-components-preview/forms';

Use cases

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.

CodeSandbox

Set a 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.

CodeSandbox

Show form field messages and 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.

CodeSandbox

Use a custom layout

You can customize the layout to show the label in different positions relative to the FormField.

CodeSandbox