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.
FormFieldProps
, , , , , ,
SharedFormFieldProps
Name | Type | Default | Description |
---|---|---|---|
controlId? | - | An id for the form control (also needed to link the label). | |
required? | false | Defines if any form control within the FormField is required. | |
disabled? | false | Defines if any form control within the FormField is disabled. | |
ariaDisabled? | - | Defines if any form control within the FormField is 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?: ;
};