Field
The Field component handles the connection between the form state and the input. It also renders UI to ensure that inputs, and the supplemental information surrounding them, are displayed to the user in a consistent way.
| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | The label to display above the input, this should describe to the user what data they are expected to enter succinctly |
description | string | undefined | Longer form description of what is expected of the user in regards to this field. Should be used sparingly. |
optional | boolean | undefined | If there are validation rules defined that would stop the form from submitting or not |
optionalText | string | (OPTIONAL) | The text to display next to the field label when optional={true} |
maxWidth | CSSProperties['maxWidth'] | undefined | The max width of the field container |
fullWidth | boolean | undefined | Whether this field should spread across 100% of it's parent's width (maxWidth overrides this) |
inputProps | { [key: string]: any } | undefined | An object of props that will be spread onto the Input component |
Input | ComponentType<any> | undefined | The component that is rendered by the Field and passed all of the data + actions that are related to that field, as well as any inputProps supplied by the implementer |
HelpContent | ComponentType<{ isValidating?: boolean }>; | undefined | Component that is rendered above the input and passed the field's isValidating state |
HelpTooltipContent | ComponentType<any> | undefined | If defined, a help tooltip will be displayed above the input with this component as it's content |