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-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.
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.
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.
Use a custom layout
You can customize the layout to show the label in different positions relative
to the FormField.
Props
FormFieldProps
, , , , | Name | Type | Default | Description |
|---|---|---|---|
label? | - |
SharedFormFieldProps
| Name | Type | Default | Description |
|---|---|---|---|
controlId? | - | An id for the form control (also needed to link the label). | |
required? | false | When required, any form control within the FormField will also be required. | |
disabled? | false | When disabled, any form control within the FormField will also be disabled. |
FormFieldMessages, FormFieldMessages.Item
You can use the FormFieldMessages.Item component to render any custom message
item inside the FormFieldMessages. Similarly, you can use the
ShowFormFieldMessages.Item component to render any message item coming from
the form control.
FormFieldMessageItemProps
Signature:
export declare type FormFieldMessageItemProps = & {
/**
* Content of the FormFieldMessage
*/
message?: .;
/**
* The validity state key set on the form control element.
* The automatically supported errors depend on the keys from the browser API (See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
* In case the same key is used for additional validation, the message will be overwritten by the default.
*
*/
validityStateKey?: ;
};