Skip to main content

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.

OverviewPropertiesChangelog3.14.0

Changes to FormField. The full components changelog also lists package-wide and cross-cutting entries.

3.13.0​

Updates​

  • The FormFieldMessages render function now receives a second argument with showErrors and isValid, so you can tell whether a potential error would now be visible for the field. (APPDEV-19340)
  • You can now set showImmediately on a FormFieldMessages.Item with variant="error" to reveal it as soon as it mounts, bypassing the field's normal reveal gate (first blur, overlay close, or immediate-on-click). (APPDEV-19340)

3.11.3​

Updates​

  • Fixed the aria-describedby attribute on form controls from incorrectly referencing IDs of error message elements that are not yet rendered in the DOM. (APPDEV-19407)

3.9.0​

Deprecations​

  • Deprecated the legacy controlId fallback. Pass id to the form control instead. (APPDEV-18261)

Updates​

  • Improved id semantics so labels, validation messages, and grouped controls target the intended form controls. (APPDEV-18261)

3.5.0​

Updates​

General​

  • Components using useFocusRing no longer re-render when the input modality changes while they are not focused. (APPDEV-5547)
  • Added design token overrides for a future visual refresh. This includes colors, surface elevations, and form field border styles across all components. (APPDEV-17223, APPDEV-17224, APPDEV-17225, APPDEV-17310, APPDEV-17311, APPDEV-17312)

3.4.0​

Updates​

General​

  • Behavior tracking attributes are now supported in all button components, including Button, IntentButton, NotifyButton, and RunQueryButton. (APPDEV-16876)
  • The text and icon color tokens for the success on accent button are now correct. (APPDEV-17388)
  • Behavior tracking attributes are now supported in all form components, including Calendar, Checkbox, DateTimePicker, DateTimeRangePicker, FieldSet, FormField, Label, NumberInput, NumberInputV2, PasswordInput, Radio, SearchInput, Select, Switch, TextArea, TextInput, and ToggleButtonGroup. (APPDEV-16882)
  • Behavior tracking attributes are now supported in FilterBar, FilterField, SegmentSelector, and TimeframeSelector. FilterField.Suggestions and TimeframeSelector.Presets now also support behavior tracking attributes. (APPDEV-16881)
  • Added feature flag and css overrides for design tokens for visual refresh. (APPDEV-17223)

3.1.0​

Updates​

  • Validation now automatically updates when validation-related props (like required) change dynamically. (APPDEV-16103)
Still have questions?
Find answers in the Dynatrace Community