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

FormFieldProps

extends, , , , , ,

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.
ariaDisabled?		-	When aria-disabled, any form control within the FormField will also be aria-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?: ; };